Best jQuery Calendar Plugins & Tutorials with Demo

    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.

    jQuery Week Calendar with Demo

    jQuery Week Calendar with Demo

    The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar. If you require a monthly calendar view, I highly recommend checking out the FullCalendar plugin by Adam Shaw.Features :

    • Display of calendar events within a weekly grid
    • Calendar events can be supplied as an array, url or function returning json
    • Calendar events can be dragged, dropped and resized
    • Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc
    • Automatically scrolls to current time
    • Freebusy management
    • multi-user management
    • Extend the core calendar event, users and free busys data structure with your own data
    • Highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.

    jQuery Frontier Calendar with Demo

    jQuery Frontier Calendar with Demo

    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.

    You may change the background image via the CSS file. By default all day cells have a linear fade png image for their background.

    jQuery CalendarPicker with Demo

    jQuery CalendarPicker with Demo

    jQuery CalendarPicker is a free ultra-light calendar.This component is a light-weight calendar/date-picker.

    Features:

    • supports internationalization (supports do not necessary means it is implemented:-) )
    • supports changing current date
    • supports mouse wheel scrolling
    • supporting (deferred) callback on date selection
    • supports variable number of years, months and days
    • supports next/prev arrows