35 Great jQuery Calendar and Date Pickers Plugins

July 9, 2013 · 40 comments

by Dustin Betonio

jquery-calendar-date-picker

With jQuery Calendar and Date Pickers it is quite simple to add cool calendar features to nearly any website. jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 41% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. I believe that jQuery is the best JavaScript library because it’s easy to use, flexible and has a lot of tutorials and plugins allowing you to integrate nearly any front end function into your site. Implementing a calendar in the web application is also made easy when using jQuery event calender and date picker plugins. Event calendars and date pickers are really useful for web applications and is a good way to communicate any kind of event relevant to the site or business publishing it. jQuery is also useful in many other areas and in particular jQuery carousel plugins can give a website a facelift. For this article I have found several useful jquery Calendar and jquery datepicker plugins web designers, freelancers and bloggers could benefit from knowing. Another very popular type of jQuery scripts are jQuery Slider Plugins. This article is regularly updated to ensure that all links are active and have the latest and best plugins are to be found here.

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.


ElegantThemes
ThemeForest

Advertisement

1. EvenTouch Calendar

eventouch

This item represents an events calendar, offered as a jQuery plugin. Please note that the PHP version is now included ! It looks like Google Calendar, but in a simpler way. It is composed in two parts with a horizontal month calendar (to go to a certain date easily and a week calendar (the main calendar, we can go to previous/next weeks with it). The calendar manage the time with half hours and it authorizes only one event at a T time. It uses HTML / CSS / JS.

MORE INFO / DEMO by CodeCanyon (premium plugin)

2. Jquery Week Calendar

Jquery Week Calendar

jQuery Week Calendar is a plugin which will include a weekly calendar in the web application. The events can be supplied as an array or JSON, and these events can be easily drag, drop and resize. There are a lot of options and event callbacks which you can refer through the official plugin page.

MORE INFO / DEMO by GitHub (free plugin)

3. AJAX Booking Calendar Pro (jQuery Calendar Plugin)

AJAX Booking Calendar Pro (jQuery Calendar Plugin)

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 smartphones).

MORE INFO / DEMO by CodeCanyon (premium plugin)

4. MagiCalender

MagiCalender

MagiCalender is a visual calender jQuery script that will allow you to add important dates and upcoming events to your website. It has a “smart” search feature, allowing you to search dates and event names. The event descriptions can handle HTML , and the script itself is all XHTML compliant.

MORE INFO / DEMO by CodeCanyon (premium plugin)

5. Calendar – date picker – date field

calendar-date-picker-date-field

A field that opens a calendar where you can pick a date. The date that you picked will be entered in the inputbox. Works with jQuery and php class.

MORE INFO / DEMO by CodeCanyon (premium plugin)

6. glDatePicker

glDatePicker

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

MORE INFO / DEMO by Gautam Lad (free plugin)

7. Timeline calendar

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.

MORE INFO / DEMO by CodeCanyon (premium plugin)

8. DZS jQuery Mini Events Calendar

DZS-jQuery-mini-event-calendar

Need a neat way to present your events in a calendar? This is the plugin for you. It is easy to install and comes with a sample setup with the plugin to show an example on how it can be configured. This plugin is compatible with iPhone, iPad and Android.

MORE INFO / DEMO by CodeCanyon (premium plugin)

9. wdCalendar

wdcalendar

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.

MORE INFO / DEMO by webappers (free plugin)

10. Event Calendar

EventCalendar1

Event Calendar is a jquery Calendar and CodFusion 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.

MORE INFO / DEMO by CodFusion (free plugin)

11. Simple Events Calendar JS

image

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

MORE INFO / DEMO by CodeCanyon (premium plugin)

12. VCalendar

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.

MORE INFO / DEMO by Ultraapps (free plugin)

13. jQuery Date Range Picker

image

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.

MORE INFO / DEMO by CodeCanyon (premium plugin)

14. jQuery.calendarPicker

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

MORE INFO / DEMO by Bugsvoice (free plugin)

15. Date Picker

DATEPICKER

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

MORE INFO / DEMO by Eyecon (free plugin)

16. Unobtrusive Date-Picker Widget Update

unobtrusive date picker

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.

MORE INFO / DEMO by frequency-decoder (free plugin)

17. jQuery TimelineXML

timeline

MORE INFO / DEMO by CodeCanyon (premium plugin)

18. jQuery Datepicker

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.

MORE INFO / DEMO by keith wood (free plugin)

19. CuteTime

cuet time

CuteTime is a customizable jQuery plugin that automatically converts timestamps to formats much cuter. Also has the ability to dynamically re-update and/or automatically update timestamps on a controlled interval.

MORE INFO / DEMO by Git Hub (free plugin)

20. Multiday Calendar Datepicker JQuery Plugin

multiday

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

MORE INFO / DEMO by Overset (free plugin)

21. jQuery Frontier Calendar

FrontierCalendar09

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.

MORE INFO / DEMO  (free plugin)

22. jQuery UI Datepicker

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.

MORE INFO / DEMO by jqueryui (free plugin)

23. oCalendar -jquery Event Calendar Plugin

image

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.

MORE INFO by CodeCanyon (premium plugin)

24. jMonthCalendar

jomonth

jMonthCalendar is a full month jquery 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.

MORE INFO by Kyle Leneau (premium plugin)

25. JSCalendar

image

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.

MORE INFO  by Dynarch (premium plugin)

26. jQuery Calendar date picker plug-in

jquery-datepicker

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.

MORE INFO by kelvinluck (free plugin)

27. ClockPick

clockpick

MORE INFO by jnathanson (free plugin)

28. FullCalendar

full calendar

FullCalendar is a famous jQuery calendar plugin which offers features like drag-and-drop, integration with Google Calendar and able to fetch events through JSON. Designers can easily customize the look and feel of the calendar, while developers can utilize the exposed hooks for user-triggered events

MORE INFO by arshaw (free plugin)

29. Sexy jQuery Multiday Calendar Datepicker Plugin – jCal

sexy-jquery-multiday-calendar

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

MORE INFO by greepit (free plugin)

30. BlueShoes JS DatePicker Component

blueshoes

The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it’s always correct.

MORE INFO by blueshoes (free plugin)

31. jCalendar

jcal

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.

MORE INFO by tedserbinski (free plugin)

32. Timeframe

timeframe

Click-draggable. Range-makeable.

MORE INFO by stephen celis (free plugin)

33. iCal-like calendar

ical

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.

MORE INFO by stefanoverna (free plugin)

34. jQuery Time Picker

time-picker

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

MORE INFO / DEMO by CodeCanyon (premium plugin)

35. timeago a jQuery plugin

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”).

MORE INFO by yarp (free plugin)

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

{ 38 comments… read them below or add one }

Akheloes April 26, 2013 at 7:30 pm

Thanks for the post, usefull stuff indeed ! :)

Reply

Web Guru April 20, 2013 at 2:52 am

Excellent !!! Very nice collection of jquery calender which we can use in different applications. I think 2,3 new styles are missing here which can use in iphone and android applications aswell. Thanks for your time for this post.

Reply

Dresses April 5, 2013 at 10:51 am

This is a topic that is near to my heart…
Thank you! Exactly where are your contact
details though?

Reply

Technology Garden November 13, 2012 at 9:12 am

Thank you so much for giving all the useful, extra ordinary calendar info at a glance.

Reply

jafar October 20, 2012 at 8:38 am

Nice and helpful..i would like to know one thing is http://jqueryui.com/ belongs to jQuery team??

Reply

Ramesh September 27, 2012 at 3:55 pm

Hi, i have a calender like inside will be statically added events, it will visible as a icons, i we mouse hover on the image or icon need to show popup with perticular event like birthday etc., if u have any jquery please share to me

Reply

Niraj Mishra September 25, 2012 at 1:12 pm

Very Nice For The Programmer to Implement Calender On the Web Page

Reply

Instant Development September 23, 2012 at 3:40 am

Thanks for giving so many options. It makes it hard to choose!

Reply

Yogi September 7, 2012 at 12:29 am

Loving Simple Events Calendar JS! Its big fonts make it Web 2.0. Thank you for putting this list together.

Reply

Rinto June 14, 2012 at 10:34 am

Thanks Dustin, You’ve done a great job , especially beginners might’ve confused when choosing a date picker .Excellent]
Rinto

Reply

silambarasan May 21, 2012 at 2:12 pm

every selected date is same colour in datapicker on hole moth how to create it

Reply

paskuale May 18, 2012 at 8:39 pm

thanks very interesting article ;)

Reply

silambarasan May 18, 2012 at 7:49 am

already done datapicker but click the date one alert message will be come how to make it
please any other help to me

Reply

Jogang May 13, 2012 at 9:55 pm

this is real good j Query. thanks for this articel

Reply

vikram March 29, 2012 at 3:34 pm

Thankyou so much you saved my time finding the right one..

Reply

Irulappan March 19, 2012 at 11:25 am

can any one give the idea about in calendar not available dates are strike with cross mark and available only show in current month of calendar…

Reply

wie ajuz March 9, 2012 at 1:18 am

same question with Jhon, how to retrive the dbvalues in jquery calender ?
Thank you

Reply

Bhanu Prakah Inturi February 28, 2012 at 10:15 am

Hi All,
Can any one help below
How can we disable the previous dates from today onward.

Thanks
Bhanu

Reply

delhiwonders February 22, 2012 at 8:45 am

Thanks u so much

Reply

john February 13, 2012 at 8:04 am

how to retrive the dbvalues in jquery calender

Reply

saran February 6, 2012 at 5:15 pm

Thanks for the link.
Good collection..we are looking for the event booking calender (open source) .
pls suggest if any other collection is left out.

Regards
Saran M

Reply

ElectiveArticles January 16, 2012 at 11:28 am

Hi! Thanks for the great jquery plugin!

Reply

adam January 16, 2012 at 11:24 am

Very nice jquery calenders and date pickers collection.
Thanks :)

Reply

Lavlesh December 5, 2011 at 7:14 am

this is truly a nice jquery plugin

Reply

Fabio Neves de Brito December 2, 2011 at 12:37 am

If there is somenone that can list more calendars. Please, feel welcome!

Reply

sachendra November 3, 2011 at 9:13 am

I need date picker for current date to future 12 months with functionalty of select date range .

Reply

Identity Technologies October 21, 2011 at 6:36 am

Thanks for sharing.
Nice jquery plugin.

Reply

pkwebmarket September 5, 2011 at 7:44 pm

Very nice collection.
Thanks :)

Reply

Deepak August 25, 2011 at 12:17 pm

Nice one yaar

Reply

wie yoga August 21, 2011 at 2:28 am

do u know, how to setting jQuery UI Datepicker , with seperately input form

Reply

syed June 26, 2011 at 7:29 am

Hi there,

I am new to web development, and i am trying to add a date picker text field through which users can select a particular date upon clicking the text field. In addition to date picker I also want my users to select time as well with an interval of 15mins. Can someone guide me how to do this.
Your kind help will be appreciated.
THanks

Reply

Mike June 26, 2011 at 12:48 am

Timeframe is exactly what I’m looking for, except that its page on GitHub says it requires Prototype, not jQuery.

Reply

sumitra June 15, 2011 at 9:06 am

thanks for the useful post.

but i require a example where i need to calculate the age by selecting the year. I tried it once, but i dont know how i did before…

Reply

fathur June 7, 2011 at 1:17 pm

that’s great!! thanks :D

Reply

Michael REMY April 27, 2011 at 11:08 am

very uselful compilation of calendar projects !

congratulations !

Reply

Rakesh Kumar March 8, 2011 at 10:40 am

I have seen lots of blogs that display the current date and time but i didn’t know the procedure to use this method. But Now i knew that they use Jquery. Thanks for suggesting.

Reply

Paul March 25, 2011 at 3:55 pm

If you just want to display the date and time you can do that using a few lines of PHP.

Reply

Abhisek November 22, 2012 at 5:05 am

Or a single line of JavaScript

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>

{ 2 trackbacks }

Previous post:

Next post:


Web Analytics