A powerful JavaScript library that simplifies the process of creating dynamic calendars with customizable events and classes. With Quick Calendar, effortlessly generate calendars with just JavaScript and CSS, without any external dependencies.
Easily set events for specific dates or multiple events at once, providing flexibility to handle various scheduling scenarios. Seamlessly repeat events on a monthly or annual basis, allowing for efficient management of recurring tasks and appointments.
Quick Calendar also offers the ability to customize the CSS class for any date, empowering you to visually distinguish important dates or highlight specific events. Tailor the calendar's starting day of the week to align with your specific needs or regional preferences.
Take full control of user interactions by assigning mouse-events to the calendar grid, enabling engaging and interactive experiences. Enhance usability by adding a convenient legend at the bottom of the calendar, providing a clear reference for color-coded events or categories.
Additionally, Quick Calendar provides an input feature, allowing users to effortlessly select the desired month and year, ensuring seamless navigation through different time periods.
Experience the simplicity and versatility of Quick Calendar as you unlock the potential of dynamic calendar creation, complete with event management, customization options, and intuitive user interactions. Empower your applications and websites with Quick Calendar's powerful functionality today.
you can pass a css selector or a Html element
let ele = document.querySelector('.cal');
let cal = new Cal(ele);
or:
let cal = new Cal('.cal');
the default month is the current month
you can add an event simplly by calling addEvent method and pass the date 'YYYY-MM-DD'.
you can insert any format accepted by Date function.
cal.addEvent('2019-3-2', true);
// the method accept another bollean parameter to refresh the calender
// immediately after adding the event,
// but it is better when we finish all the work then refresh it manually
// so the default value for refresh is false
// you can pass a Date Object
let dt=new Date('Mar 27 2019');
cal.addEvent(dt);
// you can pass an object contains the date, the tip, the class and an option
// to loop the event
// the tip will popup as the mouse hover over the event
// the loop option accept 'month' and 'year'
cal.addEvent({date:'2019-03-10', tip:'WOW', loop:'month'});
// you can also pass an array of events
// you can pass one class or an array of classes
cal.addEvent([
'2019-3-5',
{date:'2019-3-9'},
{date:'2019-3-12', class:'red', tip:'Important!', loop:'month'},
{date:'2019-3-12', tip:'another event in the same day!'},
{date:'2019-3-21', tip:'this is great!', class:['red','cal-animate']},
{date:'2019-4-23', tip:'Try it!'}
]);
let id = cal.addEvent('2019-3-18'); // return event's ID,
// use it to remove the event later if you need to.
cal.removeEvent(id); // you can also pass an array of Id's
// you can give any date a special class, you can pass one class
// or an array of classes
cal.setDayClass ({date:'2019-3-16', class: 'gold'});
cal.setDayClass ({date:'2019-3-21', class: ['gold', 'big']});
// in case you see this later
cal.goToDate('2019-3-10');
// now you are ready to refresh the calendar
cal.refresh();
// there is also many other methods:
cal.el() // returns calendar wrapper element
cal.refresh() // rebuild the calender
cal.prevMonth() // go to the privious month
cal.nextMonth() // go to the next month
cal.setFirstDayInTheWeek(n)
// set the first day to be used, // 0 is Sunday .. 6 is Saturday.
cal.clearEvents(refresh)
// clear all the events in the calender, pass true to refresh the calendar
cal.removeSpecialDayClass(obj, refresh)
// use it to remove a class from a date,
// you can pass a string date to remove all it's classes
// or pass an object {date: .. , class:..} where class can be a string or an array
clearAllSpecialClasses(refresh)
// to clear all the classes from all dates
goToDate(date)
// use it to go to a date, you can pass a string or a Date Object
Github here