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 }

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