30+ Awesome jQuery Calendar and Date Picker Plugins

by ronalea on May 5, 2013

Running a modern and user-friendly website entails many technologies and tools. One of the technologies that we see used more and more is jQuery plugins and for websites that have complex forms I would say that jQuery calendar date picker plugins is a must. These plugins can be used to extend the capability of your website forms often making it simpler and less error prone for users to choose dates. In addition, some websites have fully featured calendars integrated and jQuery is also quite useful in this case. jQuery calendar plugins are typically interactive  and rely on ajax to provide a responsive interface.

Some of the advantages of using the jQuery is that, it is lightweight, flexible, and then it offers cross browser support. In addition, there are many high quality jQuery tutorials on how to integrate jQuery on your website, why getting started is achievable.

In this post, I have collected some of the best jQuery plugins for displaying dates and date pickers. Try to explore the collection and I am sure you will find a script for your needs. In addition, you should investigate some of the other cool possibilities with jQuery. One of the most popular categories is sliders and jQuery carousel plugins that we see used on most websites these days. Please do not forget to share this article to your friends and type your comments if you find it useful. Enjoy!

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

EvenTouch Calendar - MORE INFO

eventouch-calendar

This item represents an events calendar, offered as a jQuery plugin. It looks like Google Calendar, but in a simpler way. It is composed of two parts – Horizontal month calendar (to go to a certain date easily) and Week calendar (the main calendar, we can go to previous/next weeks with it). The calendar manages the time with half hours (so, 48 cells a day), and it authorizes only one event at a T time. It uses HTML / CSS / JS.

glDatePicker - MORE INFO

gl-date-picker

glDatePicker is a simple, customizable, lightweight date picker calendar plugin for jQuery weighing in 4KB compressed.

wdCalendar - MORE INFO / DEMO

wd-calendar

wdCalendar is a jquery based Google calendar clone. It cover most Google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database.

AJAX Booking Calendar Pro (jQuery Calendar Plugin) - MORE INFO / DEMO

ajax-booking-calendar-pro

This item is ideal if you want to add information about bookings to your rentals website. The Back End is easy to use and can be easily integrated into your own CMS as the Front End can be easily integrated into your website. Both Back End and Front End can be customized separately, and the number of usages on your webpage or website is unlimited. The Calendar comes with a PHP script, but any server side script can be used to load or to save data from any database. The Booking Calendar is compatible with all browsers and devices (iPhone, iPad and Android Smartphone).

Simple Events Calendar JS - MORE INFO / DEMO

simple-events-calendar-js

Professional & Elegant Calendar, special for Modern web designs, templates etc.

Timeline Calendar - MORE INFO / DEMO

timeline-calendar

Timeline is simple JavaScript driven calendar, which is written on top of jQuery JavaScript framework. Timeline is a horizontal representation of days in month. It can be used to display unlimited number of events with their descriptions.

VCalendar - MORE INFO / DEMO

vcalendar

VCalendar (Virtual Web Calendar) is an open source Web calendar application for posting and maintaining events and schedules online, in calendar format. This is an excellent and free jquery Calendar solution for use by online Web communities and any commercial and non-commercial organizations. Unlike any other online calendars, VCalendar comes with source code in multiple programming languages: PHP, ASP and ASP.NET with potential for adding more technologies in the future.

Event Calendar - MORE INFO

event-calendar

Event Calendar is a jquery Calendar and ColdFusion event calendar that works a lot like the Google Calendar system. With Event Calendar, you can share calendar information throughout your organization. There is also a simple user facade, that you can extend, to help control user rights.

jQuery.calendarPicker - MORE INFO

jquery-calendar-picker

This component is a light-weight jquery Calendar/date-picker. Some features are – support for internationalization, changing current date, supports mouse wheel scrolling and much more.

jQuery Date Range Picker - MORE INFO / DEMO

jquery-date-range-picker

Simple jQuery UI date picker extension to allow user to choose date ranges. When user chooses a date, a hidden form is submitted. Uses jQuery 1.6 and jQuery UI 1 .8. Tested in and compatible with IE 6 -9, Firefox, Safari, Chrome, and Opera.

Date Picker - MORE INFO

date-picker

Date Picker component with a lot of options and easy to fit in your web application.

jCalendar -  MORE INFO / DEMO

jcalendar

jCalendar is an inline dynamic calendar built with jQuery. It originally started off based on the great jquery Calendar date picker by Kelvin Luck but has quickly morphed into its own code base.

Sexy jQuery Multiday Calendar Datepicker Plugin – jCal - MORE INFO / DEMO

calendar-datepicker-plugin

jCal allows for a sequence of months to reside side by side and for the user to select a number of consecutive days.

jQuery Datepicker - MORE INFO

jquery-datepicker

A datepicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the datepicker widget if it is no longer required.

jQuery Frontier Calendar - MORE INFO

jquery-frontier-calendar

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.

Unobtrusive Date-Picker Widget Update - MORE INFO / DEMO

unobstrusive-datepicker-widget-update

A datePicker ( jquery Calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.

jQuery TimelineXML - MORE INFO / DEMO

jquery-timeline-xml

TimelineXML is the perfect addition to your blog, magazine, news site, portfolio, you name it. The script takes time-stamped pieces of content and puts them on a timeline. The best thing about TimelineXML is how flexible it is.

Multiday Calendar Datepicker JQuery Plugin - MORE INFO / DEMO

multiday-calendar-datepicker-jquery-plugin

Multi-day, multi-month animated datepicker jquery Calendar plugin that weighs in at 14KB with the uncompressed development version.

jQuery UI Datepicker - MORE INFO / DEMO

jquery-ui-datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span. You can use keyboard shortcuts to drive the datepicker:

oCalendar -jquery Event Calendar Plugin - MORE INFO

ocalendar-jquery-event-calendar-plugin

oCalendar is a jQuery plugin that allows you to add an event calendar to your sites or projects easily. You can add, edit and delete events from the client side.

JSCalendar -  MORE INFO / DEMO

js-calendar

JSCalendar is a JavaScript class that adds accessible and unobtrusive date-pickers to your form elements. By using it, you can set up the coolest calendar in the shortest amount of time.

jQuery Calendar Date Picker Plug-in - MORE INFO

jquery-calendar-date-picker-plug-in

This plugin allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.

ClockPick - MORE INFO / DEMO

clockpick

A jQuery time picker plugin.

Timeframe - MORE INFO / DEMO

timeframe

Click-draggable. Range-makeable.  A better Calendar.

timeago a jQuery plugin - MORE INFO

timeago

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).

jQuery Time Picker -  MORE INFO / DEMO

jquery-time-picker

Improve your forms with this usable and easy to deploy jQuery time picker.

iCal-like Calendars With jQuery -  MORE INFO / DEMO

ical-like-calendars-with-jquery

According to Stefano Verna’s web designer experience, one of the most common requests from clients when it comes to WordPress personalization, is to add a basic event calendar to their website.

About Ronalea Talaboc Talaboc
Rona is just a simple girl often lost in her daydreams in the days past. Now, she has found herself and discovered that she loves social media, gadgets, graphic design and anything creative. During her free time, you can find her taking pictures of cats and some surreal landscapes.

{ 7 comments… read them below or add one }

Silke Capo October 30, 2012 at 1:56 pm

Thanks for putting this together! Saved me a lot of time :-)

Reply

webdone January 14, 2013 at 5:14 pm

thankx for the list, I found the one for me

Reply

Lessie Susa May 2, 2013 at 2:04 am

DHTML allows scripting languages to change variables in a web page’s definition language, which in turn affects the look and function of otherwise “static” HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load.’;

Check out the helpful content on our own website
<http://www.healthmedicinelab.com/

Reply

geovindu June 5, 2013 at 9:43 am

hi.thanks. share info.

Reply

Lukasz August 19, 2013 at 12:03 pm

I would also recommend Responsive Calendar jQuery plugin by w3widgets

Reply

nikhil September 30, 2013 at 4:12 pm

your calendar is as sexy and owsome just like you

Reply

Heather October 31, 2013 at 3:44 pm

“30+ Awesome jQuery Calendar and Date Picker Plugins
- TrendLeaks” was indeed a superb article.

If it owned even more photos it would certainly be quite possibly even better.
Thanks ,Edith

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 1 trackback }

Previous post:

Next post:


Web Analytics