Best jQuery Calendar Plugins & Tutorials with Demo

jQuery UI datepicker Skins in CSS3

jQuery UI datepicker in CSS3

CSS3 skins for jQuery UI datepicker.To use them, start by copying the .datepicker.css files you need as well as the images in the images folder. Then add the appropriate classes to your datepickers. See below for a complete list of the available skins.

Google calendar events now on your website – jQuery plugin

Google calendar events now on your website - jQuery plugin

This script pulls events that you create in your public Google calendar and displays them on your website.You may choose how many events to display at a time.Each event box can show the event start date-time, timezone, location of the event, summary and description of the event.Each event box has a link to the original event you defined in your calendar.

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.



Best jQuery websites design awards