Best jQuery Calendar Plugins & Tutorials with Demo

glDatePicker : ultra-simple Date Picker plug-in for jQuery

glDatePicker : ultra-simple Date Picker plug-in for jQuery

An ultra-simple, customizable, light-weight date picker plug-in for jQuery at just over 7KB compressed or 25KB uncompressed.

Features:

  • Stylize current date, selected date, special dates and individual days of the week
  • Set data on special dates (that is returned on callback when selected)
  • Repeatable date ranges, individual dates and special dates
  • Restrict selection to range of dates, individual dates, years, months and days of the week
  • Restricting forward / backwards month navigation
  • Automatically jump to respective month on selection (if it is the next or previous month)
  • Offset days of the week (e.g. make Wednesday the first day of the week)
  • Jump to specific month or year through select drop-down
  • Customizable month names and days of week names
  • Callbacks for when date is selected and when calendar is about to show or hide
  • Individual styles per date picker on the same page
  • Render directly below input control (by default) or specify a custom element to render into

Calendario: A Flexible jQuery Calendar Plugin

Calendario: A Flexible jQuery Calendar Plugin

Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month.

DZS jQuery Mini Events Calendar

DZS jQuery Mini Events Calendar

Need a neat way to present your events in a calendar? This is the plugin for you.

Features:

  • easy install – purchase, download the zip, read the docs
  • sample setup included – a sample setup with the plugin to show an example on how it can be configured
  • dzs tooltips included – a tooltip plugin from our portfolio is included to provide rich experience to your users
  • two skins – default and black
  • iPhone/iPad compatible – this plugin is compatible with iToys, even Android works
  • major browsers support – IE7 , IE8, IE9 , IE10, Chrome, Opera, Safari and Firefox fully tested
  • html supported – inline content is no problem for this plugin

jQuery Date Range picker for Twitter Bootstrap

jQuery Date Range picker for Twitter Bootstrap

This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely.

If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.

pickadate.js : LightWeight jQuery DatePicker

pickadate.js : LightWeight jQuery DatePicker

Pickadate.js is a lightweight jQuery dateinput picker.

Pikaday : JavaScript datepicker

Pikaday : JavaScript datepicker

Pikaday is a JavaScript datepicker with a light footprint and easy style-ability with modular CSS. Pikaday is packed below 5kb and isn’t even dependent on jQuery. It does play well with Moment.js if you need advanced formatting. This datepicker has literally been on my “projects to build” list for years. I’ve seen alternatives since but nothing I’ve been happy to develop further.

jQuery Mobile Datebox

jQuery Mobile Datebox

DateBox is a jQuery-mobile based date and time picker.Four display mode Standard, click-outside-to-close popup mode, Forced input modal popup mode, Unique page dialog mode,  Inline mode.

Features:

  • Android style date picker
  • Calendar style date picker
  • Slide style date picker
  • Flip Wheel style date or time picker
  • 12 and 24 hour time picker
  • Duration time picker

JalaliJSCalendar : JavaScript date-picker and calendar

JalaliJSCalendar : JavaScript date-picker and calendar

JalaliJSCalendar is a JavaScript date-picker and calendar widget based on “Dynarch DHTML Calendar” from Mihai Bazon. The main difference between two is that JalaliJSCalendar supports Persian (AKA Hijri Shamsi) calendar too, which is the official Iranian calendar.

jToday : jQuery Date Showing Plugin

jToday : jQuery Date Showing Plugin

jToday is a jQuery plugin that displays a today calendar showing today’s date or any date you specify. jToday is written in JavaScript. jToday also supports a year value, although I’ve hidden it in my examples. You can create your own CSS and background image that supports year if you are so inclined.

jQuery Verbose Calendar

jQuery Verbose Calendar

Why another jQuery calendar? I needed something very specific for a personal project which led me to created this calendar. After making it I thought it was pretty neat.You’ll have to source the calendar JS, the calendar CSS, and jQuery. The implementation is straight forward if you check out the example.



Best jQuery websites design awards