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.

If you like jQuery plugins and javascript in general, make sure to check out the thousands of fully-licensed scripts found over at Envato Market

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.



1. EvenTouch Calendar

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

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 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


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 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 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


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 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


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

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

MORE INFO / DEMO by CodeCanyon (premium plugin)

12. 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

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

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

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


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


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

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


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

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

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


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

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


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


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


Click-draggable. Range-makeable.

MORE INFO by stephen celis (free plugin)

33. iCal-like calendar


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

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

Thank you for visiting Tripwire Magazine. Don’t forget to share this post with your friends.

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.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!