Best jQuery Calendar Plugins & Tutorials with Demo

jQuery Events Calendar via Ajax

jQuery Events Calendar via Ajax

Events Calendar is a flexible plugin that allows you to connect to your database and show up your event days on a calendar view. You can easily list your events on wherever you want on your page via just one click.

Features:

  • Easy installation
  • jQuery powered
  • Cross platform (Php, Asp…)
  • Major browsers support
  • Language support
  • Easy to customize
  • Detailed options
  • 4 events
  • 7 color themes

Rome : Customizable Date & Time Picker

Rome : Customizable Date & Time Picker

Customizable date (and time) picker. Opt-in UI, no jQuery!.Rome synchronizes in real-time with inputs, never steals focus, and its CSS is entirely customizable!

jQuery.minical : A lightweight Datepicker plugin

jQuery.minical : A lightweight Datepicker plugin

Minical is teeny (~300 lines of Coffeescript), and has no dependencies other than jQuery, its icon PNG and stylesheet (which has SASS variables for easy customization).

It has full keyboard support and also defaults to make the associated input read-only, so its value can only be changed by the date format specified in the plugin, alleviating unexpected JavaScript date-parsing drama. (It also works great on mobile, with just enough touch event handling to behave properly.)

BeatPicker : jQuery Date Picker Widget

BeatPicker : jQuery Date Picker Widget

Beatpicker is a simple and powerful date picker widget for jQuery.

Features:

  • Different Date Formats.
  • Different Position options.
  • Custom Separator.
  • Disable Any Month option.

Smart Forms with jQuery Html5 & CSS3

Smart Forms with jQuery Html5 & CSS3

Smart Forms is a responsive professional Form Framework / pack with a clean consistent Form UI. The framework includes a variety of form Widgets such as Datepickers, Timepickers, Monthpickers, Colorpickers, Numeric Steppers, UI Sliders, Google maps, toggle switches validation, masking among other features.

Features:

  • Multiple form inputs
  • File inputs / uploaders
  • CSS3 checkboxes + Radios
  • CSS3 toggle switches
  • CSS3 review & rating
  • Tooltips + vector icons
  • Notification alerts
  • CSS3 multi shape buttons
  • Animated progress bars
  • Simple pricing tables
  • Ajax form processing
  • Input masking
  • PHP CAPTCHA with refresh support
  • 40+ starter templates included
  • Date & time picker widgets

Responsive flat design jQuery DateTime Picker plugin

Responsive flat design jQuery DateTime Picker plugin

Responsive flat design jQuery DateTime Picker plugin for Web & Mobile.DateTime Picker is a quick highly customizable jQuery plugin. The design is clutter free & well suited for embedding it into mobile application development.

Users can change values using +/- buttons or type values directly into the textbox by selecting each value fields.

DateTimePicker : jQuery plugin select Date and Time

DateTimePicker : jQuery plugin select Date and Time

Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It’s easy to customize options.

jQuery Flat Event Calendar Responsive Timeline

jQuery Flat Event Calendar Responsive Timeline

It’s a responsive event calendar. It can also be used as a timeline. It’s suitable both for responsive and fixed layout. Its features :

  • Flat UI.
  • Supported by all major browsers.
  • Responsive design.
  • 5 layouts included.
  • Own layout can be customized.
  • Almost fully css customizable.
  • Metro and iOS7 inspired.

CLNDR.js : A jQuery Calendar Plugin

CLNDR.js : A jQuery Calendar Plugin

CLNDR is a jQuery plugin for creating calendars. Unlike most calendar plugins, this one doesn’t generate markup. Instead you provide an Underscore.js HTML template and in return CLNDR gives you a wealth of data to use within it.

CLNDR takes an array of event objects and weaves them into the days array in your template. This means you can pass in as many events as you want and CLNDR will make sure they show up when you need them.

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.



Best jQuery websites design awards