In this article I have gathered 10 Best and Useful jQuery Calendar Plugins that would allow you to incorporate cool calendar features to your websites. The following plugins are easy to use and take minimal efforts to add beautiful calendars to your web applications. I hope you will find the list handy and useful for your projects, the time of old selects or drop down boxes for dates are over, it is only a matter of “time” before you get stuck into the power of jQuery! Enjoy !!
If you like the article you might be interested in our other article on 16 jQuery Date Picker Plugins to Plan Your Tasks.
1. CLNDR.js
CLNDR.js is a jQuery plugin for creating calendars and customizing them however we want. The plugin doesn’t generate any markup but uses an Underscore.js HTML template to fill with data. It has ready-to-use options for determining the week offset, the date to be displayed on initial load, click events (like next/previous month) and much more.
2. jQuery Verbose Calendar
jQuery Verbose Calendar is a plugin for creating a calendar that displays the whole months and days of a year at the same time. Once loaded, it auto-scrolls to “today” and displays the day names when hovered to any date in a tooltip. The calendar can be inserted into any HTML element with a single function, there are very few parameters to customize but a callback exists when a date is clicked which is great for adding extra interactions.
3. wdCalendar
wdCalendar is a jQuery plugin that enables us to create an event calendar that functions similar to the popular Google Calendar. With a drag’n drop interface and feature-rich API, it is possible to create, update or delete events easily. It has custom views for day, week or month where you can easily go to a selected date (also with the help of provided JS methods). Usually, multi-day events are complicated; however, wdCalendar handles them well.
4. CalendarPicker
CalendarPicker is a jQuery plugin that enables us to create a good-looking and pretty original date picker. It displays a pre-defined amount of the next and previous days/months/years for a quick selection. Also, users can browse through the dates with mouse-wheel (uses the mouse wheel plugin) or the prev/next buttons. The date picker can display the current date by default or any selected one on load. Day and month names can be optionally customized which is nice for multilingual interfaces.
5. jMonthCalendar
jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.
6. Full Calendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source licensed under an MIT license.
7. Cal-Heatmap
Cal-Heatmap is a javascript module to create a calendar heatmap. This module will help you to create a calendar, like the contribution calendar appearing on each github user’s page, but with navigation and more controls on the data formatting.
8. gIDatePicker
glDatePicker is a simple, customizable, lightweight date picker calendar plugin for jQuery weighing in 4KB compressed (11KB uncompressed). It includes features like forward and backward navigation, current date highlight, restricting selection of dates, individual styles per date picker, and show currently selected date.
9. jQuery Frontier Calendar
jQuery Frontier Calendar is a full month calendar jQuery plugin that looks like Google Calendar. All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltips, etc, are not part of the calendar plugin. These are to be created by you so you can control how they look. Use the API hooks in your form elements to control the calendar.
10. jDigiClock
jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget. To use the jDigiClock plugin, simply include the jQuery library, the jDigiClock source file and jDigiClock core stylesheet file inside the head tag of your HTML document. jDigiClock accepts a lot of configuration options, e.g. Clock images path, Weather images path, Set AM/PM option, Weather location code, Set weather metric mode: C or F, Weather update in minutes.
