30 Best Free Calendar & Datepicker jQuery Plugins

Some might assume that an Internet loaded with free code would breed indolence. Yet it seems developers are willing to contribute their help to projects more than ever before. JavaScript libraries are a microcosm of the larger open source community – specifically jQuery with its ever-growing popularity and easy learning curve.

One such area of broadened potential would be jQuery-based calendars for websites. Although date & calendar interfaces have sparse usage, they come in handy for very specific circumstances. And when building a site that requires this type of interface you’ll be happy to know there are dozens of open source plugins available.

I’ve catalogued the 30 best free jQuery plugins that offer datetime functionality. Some are more developed than others and each plugin has its own set of benefits. The best part about using open source code is that it’s easy to customize for your own purpose. So peruse through this collection and take a look at any plugins which pique your curiosity.

For more jQuery plugins – check out our post on free gallery sliders.

The Problems with JS Calendars & Datepickers

Anything related to date/time for the web is usually built on a backend language. From Ruby to Python or PHP there are plenty of choices. But some modern websites tend to behave like web applications: snappy, responsive, and quick to react. jQuery has the capability of tying into a backend language through AJAX, but it’s not always the best solution.

Calendar plugins are often completely useless because they’re not interactive or just feel too clunky. It’s a good idea to map out your concept for how the final layout should behave. Bloat is another issue which can be difficult to avoid. Just be sure to use minified versions of all plugins and resource files to reduce the length of HTTP requests.

Date pickers tend to be smaller and more compact in relation to full calendar interfaces. The biggest problem with date pickers is the interface itself. Many will focus on a simpler UI with dropdown menus or input fields. Others will incorporate a more traditional calendar-style picker with an interface that’s much too small.

custom-datepicker-ui-dribbble-shot

The design network Dribbble has lots of datepicker interfaces you could check out. Granted these are just design mockups but the best ones should capture your attention immediately. It should become natural to feel how an interface ought to behave just through the design.

User interface design and user experience design tend to go hand-in-hand. If a plugin can’t balance these ideas properly it will often lead to frustration for both the developer and the user.

What Makes a Great Plugin?

It should be noted there is rarely an empirical list of rules that everyone agrees would denote great plugin design. I have my own opinions about best practices for jQuery plugins based on my own experiences. No single plugin should be considered ideal since each project is subjective and requires its own solution.

With that said, here are a few things to look out for when selecting a plugin for your project:

  • Balanced Documentation. The key to a great plugin is ease-of-use from a user’s standpoint and a developer’s standpoint. Well-documented code is like the blueprint of a house; It’s vital in order to learn how to build or reconstruct whatever you’re using.
  • Easy & Open Customization. For the most part developers want to append generic functionality with a few tweaks and changes based on the situation. A great plugin should come with options that can be updated to add or remove certain functionality. The best plugins will offer callback methods for developers to write their own functions.
  • Broad Compatibility. Who wants to visit a site with a datepicker that only works in recent versions of Chrome and Webkit browsers? Certainly not Firefox or Opera users, let alone IE users(assuming they still exist). Double-check compatibility with each plugin to be sure it’ll reach your intended audience.
  • Practical UX. If the plugin has some type of interactive component you really want it to be pragmatic and straightforward. Ask yourself, does the plugin behave exactly like you would expect? Are there ways to change the functionality to operate more suitably? Plugins are meant to enhance a website design, however poor UX does nothing but drag it down.

Calendar Plugins

1. CLNDR.js

01-clndr-js-open-source-calendar
Why it’s brilliant:

  • Easy to style and scale to fit any website.
  • Responsive for every screen size.
  • Dynamic event viewer with specific details and dates.
  • Demo  Download

2. FullCalendar

02-full-calendar-jquery-plugin
Why it’s brilliant:

  • Drag & Drop functionality offers an interactive atmosphere.
  • Sortable views for days, weeks, or months.
  • Optional connectivity with Google Calendar.
  • Insanely detailed documentation for developers.
  • Demo  Download

3. Zabuto Calendar

03-zabuto-calendar-jquery-plugin
Why it’s brilliant:

  • External data may be pulled via AJAX/JSON.
  • Runs on top of Bootstrap with traditional CSS classes.
  • Optional multi-language settings.
  • Demo  Download

4. Verbose Calendar

04-verbose-calendar-jquery-plugin
Why it’s brilliant:

  • The fullscreen minimalist interface is well-designed and full of ingenuity.
  • Verbose Calendar is laid out horizontally instead of vertically. Dates and months are easier to access.
  • All click events are handled through a callback method. This requires some knowledge of jQuery but offers a lot more control over the functionality.
  • Demo  Download

5. e-Calendar

06-ecalendar-jquery-open-source-code
Why it’s brilliant:

  • Calendar content is managed through JSON.
  • Date & time info for individual events.
  • Easy to limit navigation of previous or future months.
  • Demo  Download

6. jQM Calendar

07-jqm-calendar-mobile-ui-plugin
Why it’s brilliant:

  • The most convenient fullscreen calendar for jQuery Mobile.
  • Customizable theme and content for calendar events.
  • Lightweight! JS+CSS files come out to ~14KB.
  • Demo  Download

7. GoogleCalReader

08-google-cal-reader-jquery-plugin
Why it’s brilliant:

  • API connection with Google Calendar is quick & painless.
  • Almost no CSS; Completely blank template for custom styling.
  • Data is appended right into HTML with pre-built structural elements.
  • Demo  Download

Datepicker Plugins

8. glDatePicker

10-gl-datepicker-plugin-open-source
Why it’s brilliant:

  • Navigation limits to specific months or weeks.
  • Setup details on special days or events.
  • 7kb compressed with plenty of custom options.
  • Demo  Download

9. Multiple Dates Picker

11-multiple-date-picker-calendar-ui
Why it’s brilliant:

  • Allows multiple consecutive dates and non-sequential dates.
  • Runs as a standalone widget or attached to an input field.
  • Great online documentation and live sample demos.
  • Demo  Download

10. DateTimePicker

12-datetime-picker-calendar-plugin-jquery
Why it’s brilliant:

  • Offers many different formats for date & time selection.
  • Requires just a single line of JS code to operate.
  • Themeable CSS file with documentation.
  • Demo  Download

11. Datepair.js

13-jquery-datepair-plugin-open-source
Why it’s brilliant:

  • Documented options and methods for hand-written code.
  • Specifically built for range selection between two datetime periods.
  • No dependencies but can optionally work with jQuery, Zepto, or Bootstrap.
  • Demo  Download

12. Timepicker

14-timepicker-jquery-plugin-open-source
Why it’s brilliant:

  • More focused on time with features like duration.
  • Various time formatting styles to choose from.
  • Works on any HTML element, input field or otherwise.
  • Demo  Download

13. jQuery UI Datepicker

15-jquery-ui-datepicker-calendar-component
Why it’s brilliant:

  • The most common datepicker plugin with the greatest amount of support.
  • Easy to customize and restyle for your own website.
  • Has a library of animations and extra effects attached to the datepicker.
  • Demo Download

14. Rome

16-rome-calendar-plugin-open-source
Why it’s brilliant:

  • No immediate jQuery dependency.
  • Supports all major browsers even dating back to IE7.
  • Offers both a date and time picker in the same window.
  • Demo  Download

15. jCal

17-multiday-calendar-picker-jcal
Why it’s brilliant:

  • Customizable multi-month datepicker interface.
  • Allows multi-date selection over a period of weeks or months.
  • Set a limited number of days for one selection(ex: only 7-day periods).
  • Demo  Download

16. Zebra Datepicker

18-zebra-datepicker-calendar-plugin
Why it’s brilliant:

  • Allows date ranges connected with multiple input fields.
  • Two default themes with accessible customization features.
  • Supports all major browsers including legacy versions like IE6+.
  • Demo  Download

17. jQM DateBox

19-jquery-mobile-datebox-plugin
Why it’s brilliant:

  • Works perfectly with all versions of jQuery Mobile.
  • Comprehensive API documentation for further development.
  • Built-in theme designer with customizable inputs and features.
  • Includes many different interfaces like the square calendar, iOS flipbox, or +/- incremental boxes.
  • Demo  Download

18. Filthypillow

20-filthy-pillow-jquery-calendar-picker
Why it’s brilliant:

  • Options for pulling the current time.
  • Keyboard shortcuts are built into the plugin code.
  • Easy to save and pass dates into backend functions.
  • Demo  Download

19. PickMeUp

21-pickmeup-jquery-calendar-selector
Why it’s brilliant:

  • Select multiple dates as a range or as separate entities.
  • Multi-month interface to display more than one month at a time.
  • Plenty of configuration options for the interface and user experience.
  • Demo  Download

20. DatePicker

22-eyecon-datepicker-open-source-plugin
Why it’s brilliant:

  • Mark holidays or special days/weekends using CSS.
  • International localization for different languages.
  • Flat-mode selection for individual date pieces(select year, then month, then day).
  • Demo  Download

21. Simple DateTimePicker

23-simple-datetime-picker-jquery
Why it’s brilliant:

  • Customizable languages and date/time formatting options.
  • Both date and time selection are located in the same place.
  • Date/time picker can be displayed inline or attached to an input field.
  • Demo  Download

22. jQuery Mobile Date Nav

24-jquery-mobile-date-navigation-plugin
Why it’s brilliant:

  • Runs a simpler Mobile theme compared to jQM DateBox.
  • Default content is built using HTML5 data-attributes.
  • Arrow navigation is more straightforward but offers less control.
  • Demo  Download

23. Flat DateTime Picker

25-flat-datetime-picker-jquery-plugin
Why it’s brilliant:

  • Completely responsive interface.
  • Handles date, time, or date/time in a single box.
  • Flat & clean UI is perfect for any website or mobile webapp.
  • Huge table of parameters documented with example code snippets.
  • Demo  Download

24. Pikaday

26-pikaday-open-source-jquery-plugin
Why it’s brilliant:

  • Extremely lightweight(minified source is ~5kb).
  • Modular cascading styles for easy customization.
  • No immediate dependencies with optional jQuery support.
  • Demo  Download

25. ClockPicker

27-clockpicker-jquery-clock-input-plugin
Why it’s brilliant:

  • Circular analog clock interface is a unique method for time selection.
  • Supports both web & mobile devices. Fantastic touchscreen support.
  • The library is designed to run over Bootstrap using the default styles.
  • Demo  Download

26. jQuery UI DateRangePicker

29-daterangepicker-ui-jquery-plugin
Why it’s brilliant:

  • Detailed API with a full list of options and methods.
  • Runs on top of jQuery UI with the same theme customization benefits.
  • Range can be expanded to showcase multiple months in the same window.
  • Offers preset date ranges based on the current day(ex: last 7 days, month to date, next 30 days).
  • Demo  Download

27. Ion Calendar

30-ion-calendar-jquery-plugin-preview
Why it’s brilliant:

  • All touchscreen devices are fully supported.
  • Works as both a regular calendar and datepicker.
  • Supports all international languages and date formats.
  • The click event callback allows you to write a custom method for handling interactions.
  • Demo  Download

Tutorials for Building Your Own Calendar/Datepicker

If you’re someone who likes to get under the hood and customize from scratch then you may prefer to start with a tutorial. jQuery plugins are easy to customize once you learn the code structure. But there’s nothing like the feeling of starting and completing a brand new plugin.

Each of these tutorials place a focus on building a calendar or datepicker interfaces through jQuery. If you have the patience and time then it may be worth building something from scratch. Not every tutorial goes in-depth about the plugin side of coding, which may require a bit more research. But once you understand the core concepts everything else should fall right into place.

Unfortunately there aren’t many tutorials related to datepickers and calendars because they’re much less common than slideshows or dropdown menus. But this collection should be perfect to satiate the appetite of anyone thirsting for greater knowledge.

1. CSS3/jQuery UI Calendar

tutorial-01-designmodo-jquery-ui-calendar
Why it’s brilliant:

Perhaps the most popular Calendar library is jQuery UI. It can be expanded, customized, and restyled using a little jQuery and CSS. Valeriu Timbuc wrote this tutorial expounding on how to build a dynamic calendar interface. It covers the general setup of jQuery along with the custom CSS3 properties used to design and restyle everything.

View Tutorial

2. Calendario

tutorial-02-flexible-calendar-jquery-plugin
Why it’s brilliant:

The Codrops blog is perhaps one of my absolute favorites in the realm of web development. Their tutorials are concise, well-designed, and work exactly as featured.

Mary Lou is the author and developer for this jQuery plugin tutorial named Calendario. It’s a fully-responsive flexible plugin for creating a calendar interface with any style you please. The tutorial is super easy to follow and the plugin code is 100% free to download. Anyone who’s primarily interested in frontend development with jQuery should really go through this tutorial.

View Tutorial

3. jQuery/AJAX Calendar

tutorial-03-php-ajax-jquery-code-calendar
Why it’s brilliant:

As I mentioned before, most web calendars are built using some type of backend language. Although jQuery can be great for dynamic features, it can be dramatically improved with some backend programming.

This tutorial written by Josh Lockhart does everything right. You’ll be introduced to the jQuery AJAX API for connecting into a PHP backend. It also covers the initiation of a MySQL database used to store the datetime information. I’ll admit this is definitely a tutorial for more advanced developers – but if you’re curious to learn about PHP this may be perfect introductory material.

View Tutorial

4. Custom jQuery UI Calendar

tutorial-04-custom-jquery-ui-color-scheme-calendar
Why it’s brilliant:

The default jQuery UI theme is rather straightforward and rarely match existing websites. In this tutorial you’ll learn how to customize the UI Calendar/Datepicker theme from scratch. It does not specifically rely on ThemeRoller, instead opting towards a more customized approach. Although the final demo is a little bare, it grants you much more control to restyle the interface in any direction you please.

View Tutorial

5. jQuery UI Datepicker in WordPress

tutorial-05-jquery-datepicker-wordpress
Why it’s brilliant:

Adding the jQuery UI library to your static HTML page is a breeze. However getting it to run in WordPress is a whole separate topic – not to mention the code required for appending a specific widget into a page is often quite tedious.

But thanks to this Datepicker tutorial you should have no problem incorporating the jQuery UI component into any WordPress theme. It goes into great detail about the proper way to include the jQuery UI file through WordPress’ wp_enqueue_script function. Any WP developers out there who need to incorporate a frontend datepicker will take away reliable information from this post.

View Tutorial

6. HTML5 Datepicker with Fallback

tutorial-07-datepicker-ui-concept-plugin
Why it’s brilliant:

Few developers are willing to push new standards because browser technology is often lacking in support. But HTML5 has been growing rapidly and seen a tremendous increase in general browser acceptance.

This tutorial written by TJ VanToll explains how to build an HTML5 type=”date” input field using jQuery as a fallback. It offers the best of both worlds incorporating a newer HTML5 input with a more trustworthy jQuery UI alternative. Each step is easy to follow and there are plenty of live demos throughout the article.

View Tutorial

7. WP Post Editor Datepicker

tutorial-08-datepicker-ui-wordpress-admin-post-page
Why it’s brilliant:

Tuts+ does a lot of multi-post tutorials which are broken up into series. This series is one such example written by Tom McFarlin who outlines the process of adding a datepicker into the WordPress post editor. All of the code is phenomenal and it’s very easy to understand. Although not everyone likes to use WordPress, it is a popular CMS for both personal and professional web projects.

View Tutorial

Final Ideas

As the years pass I’m constantly bumping into new libraries and plugins for enhanced web development. When a talented developer needs some functionality that can’t be found elsewhere, they’ll often build it themselves. Many plugins have been created through this origin story and have since been released into the public.

I certainly hope these calendar and datepicker plugins will offer some value to web designers and developers. The beauty of jQuery is that it’s cross-platform and supported in almost every browser with JavaScript. You have your pick of the litter when it comes to plugins and there’s bound to be even more released over the next few years. If you have questions or suggestions for other related plugins let us know your thoughts in the post comments below.

For More on jQuery Plugins, Check Out These Articles:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

Comments are now closed on this post.