Some might assume that an Internet loaded with the 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 cataloged 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. jQuery makes it really easy to create datepickers and you can make them fully functional and customizable by adding just a few extra lines of code. You can use jQuery plugins to create custom datepicker according to your need and choice. The datepickers are essential for many businesses and they can also be used to track time for any specified purpose.
UNLIMITED DOWNLOADS: 50+ Million UI Kits & Design Assets
DOWNLOAD NOW
All of these jQuery calendars and datepickers have been created using simple coding and the tutorials revolve around creating and managing different date and time interface customizations. You can also craft such interface by imagining and mapping different interface customizations in your mind and then putting them into work. Few of them are damn simple and easy-to-code while few of them offer advanced options to the users to customize according to their preference. Nearly all of these datepicker calendars are similar to each other and they have similar options of customizations and enhancing the user experience.
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.
The design network Dribbble has lots of datepicker interfaces you could check out. Granted these are just designed 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 drags it down.
Calendar Plugins
1. CLNDR.js
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.
- Dates for each specific event are highlighted or underlined.
- Demo Download
2. FullCalendar
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.
- Simple and flexible user interface.
- Demo Download
3. PIGNOSE Calendar
Why it’s brilliant:
- Responsive and mobile-friendly.
- Can be used as a multiple range date picker.
- Dark theme and other variations offered.
- Can be displayed using a modal.
- You have the option to disable certain days.
- Demo Download
4. TOAST UI Calendar
Why it’s brilliant:
- Supports monthly, weekly, daily views, and more.
- Create or edit your schedule with a simple dragging motion.
- Supports efficient management of milestone and task schedules.
- Supports customizing UI by theme
- Demo Download
5. Zabuto Calendar
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.
- A unique way of highlighting special and regular intervals.
- Demo Download
6. Verbose Calendar
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.
- Professional user-interface with a unique outlook.
- Demo Download
7. e-Calendar
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.
- Easy to write and implement the code.
- Demo Download
8. jQM Calendar
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.
- Easily customizable with a lot of different choices for the users.
- Demo Download
9. GoogleCalReader
Why it’s brilliant:
- API connection with Google Calendar is quick & painless.
- Almost no CSS; a completely blank template for custom styling.
- Data is appended right into HTML with pre-built structural elements.
- Light-weight and simple datepicker( more like a calendar in your personal diary)
- Demo Download
Datepicker Plugins
10. glDatePicker
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.
- Colorful user-interface with super-easy navigation and each and everything in your own control.
- Demo Download
11. Multiple Dates Picker
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.
- Simple and easy to implement the code.
- Demo Download
12. DateTimePicker
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.
- Offers sidebar time selection alongwith the date selection at the same time.
- Demo Download
13. Timepicker
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.
- Learn to design and customize the date and time range selection of all kinds.
- Demo Download
14. jQuery UI Datepicker
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.
- A drop-down calendar with advanced options.
- Demo Download
15. Rome
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.
- Greatly customizable user-interface to quizzes, applications, and software.
- Demo Download
16. 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).
- Displays two months consecutively at a time.
- Demo Download
17. Zebra Datepicker
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+.
- You can jump from one month to the other and supports all the date formats.
- Demo Download
18. Hello Week
Why it’s brilliant:
- Zero-dependency JavaScript plugin.
- Select date and time from modal popup
- Calendar layout would fit in visually with most modern sites.
- Minimal, clean inline date picker.
- Default plugin settings and callback functions to customize the calendar.
- Demo Download
19. Filthypillow
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
20. PickMeUp
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.
- Dark background
- Demo Download
21. DatePicker
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 the month, then day).
- Demo Download
22. Simple DateTimePicker
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.
- Contains almost each and every option that can help or entertain the user.
- Demo Download
23. jQuery Mobile Date Nav
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
24. Lightpick
Why it’s brilliant:
- User-friendly date range picker is flexible, customizable and mutli-language campatible.
- Allows minimum and maximum date range sets.
- Works as a date picker as well.
- Useful event handlers and API methods.
- Demo Download
25. ClockPicker
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
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
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 will teach you to build each section of the date picker calendar separately and also teach you to add additional features that will enhance the user experience multiple times.
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 drop-down menus. But this collection should be perfect to satiate the appetite of anyone thirsting for greater knowledge.
1. CSS3/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
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
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. jQuery UI Datepicker
Why it’s brilliant:
This tutorial offers a straightforward guide to code and output for customizing jQuery UI datepicker. This date picker is usually connected to a text-box so the user’s selection of date from the calendar can be transferred to the textbox. The step by step guide is a great way to learn some basic customization of the plugin.
View Tutorial
5. jQuery UI Datepicker in 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
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
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:
