20 Best jQuery Calendar Datepicker Plugins

Posted on 25. Feb, 2012 by carl in jQuery Plugins

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. Calendar is one of the famous form element. It helps to reduce human error. Instead of letting users type the date in certain format, you let them choose it from a calendar.

jQuery is also useful in many other areas and in particular jquery carousel plugins can give a website a facelift. In this collection, you will see some of the best jQuery calendar datepicker plugins that will allow you output planners and calendars even more easily. You can directly incorporate these plugins into your website as they only require minor modifications and styling.

jQuery Frontier 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.

jQuery Frontier Calendar

jQuery Calendar Widget Plugin

A simple jQuery Calendar Widget Plugin with a month view. You can specify which month you would like to display or have it display the current month. With just 100 lines of Javascript code, this plugin is light-weight and perfect for its purpose.

jQuery Calendar Widget Plugin

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.

Timeline calendar

Full Calendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

FullCalendar

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.

AJAX Booking Calendar Pro

Sexy jQuery Multiday Calendar Datepicker Plugin – jCal

jCal is a an innovative and sexy jQuery datepicker plugin that offers multi-day, multi-month calender datepicker options. jCal allows for a sequence of months to reside side by side and for the user to select a number of consecutive days.

Sexy jQuery Multiday Calendar Datepicker Plugin – jCal

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.

wdCalendar

Date Picker

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

Date Picker

Magi Calender

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.

MagiCalender

Event Calendar

Event Calendar is a jQuery 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.

Event Calendar

Date Range Picker using jQuery and CSS Framework

This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges. It is an update from a previous version we wrote for jQuery UI 1.5.3.

Date Range Picker using jQuery and CSS Framework

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.

jQuery Date Range Picker

glDatePicker

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

glDatePicker

Create a jQuery calendar with AJAX, PHP, and a remote data source

The final jquery Calendar in this tutorial contains a hyperlink for each day of the month. When a hyperlink is clicked, a list of events for that day is requested from a remote script, cached client-side, and displayed on the page.

Create a jQuery calendar with AJAX, PHP, and a remote data source

Blue Shoes 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.

BlueShoes JS DatePicker Component

Multiday Calendar Datepicker JQuery Plugin

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

Multiday Calendar Datepicker JQuery Plugin

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.

oCalendar -jquery Event Calendar Plugin

Date / Time Picker

A date picker control. To open the calendar, click the input box.

Date Time Picker

JavaScript Calendar Component

Calendar Component that is very customizable and extendable.

JavaScript Calendar Component

Calendar – A Javascript class for Mootools

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

Calendar – A Javascript class for Mootools

Tags: calendar datepicker plugins, jquery plugins