This tailwindcss-calendar package modified by Sophat Leat using TailwindCss Style and EvoCanlendar for JS.
I have tried to search for TailwindCss-Calendar but not I can find what I want. So I decided to build this this small package and Publish it to NodeJS Server (npm).
To install Package let's follow the these steps
Full HTML Project
git clone https://github.com/nintrealab/tailwindcss-calendar.gitgo to project directory
cd tailwindcss-calendar
npm install -D tailwindcss-calendar
// OR
npm i -D tailwindcss-calendarTailwindCss Calendar Source
cd node_modules/tailwindcss-tailwindcss/src
Compiled Style TailwindCss Calendar Source
cd node_modules/tailwindcss-tailwindcss/dist
Note: CDN Can't Customize New CSS
Basic HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailwindCss Calendar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss-calendar/dist/css/calendar.css">
</head>
<body>
<div
id="evoCalendar"
class="evoCalendar border w-full dark"
></div>
<!-- Requried Jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tailwindcss-calendar/dist/js/evo-calendar.js"></script>
<!-- Options -->
<script>
$("#evoCalendar").evoCalendar(
{
language : 'en', // km
sidebarDisplayDefault : true, // false
calendarEvents: [
{
id : '1', // Event's ID (required)
name : "New Year", // Event name (required)
date : "October/1/2022", // Event date (required)
type : "holiday", // Event type (required)
everyYear : true, // Same event every year (optional)
color : "pink" // optional
},
{
id : '2',
name : "Event Name Event Name Event Name",
date : ["October/13/2022", "October/15/2022"], // Date range
description : "Description",
badge : "3Days",
type : "event",
color : "red"
}
]
});
</script>
</body>
</html>