9 Useful jQuery Calendar And Date Picker Plugins For Web Designers

Sep 20th, 09 by Dicky | View Comments |
You maybe interested in our latest article Personal Facebook Fan Pages of Celebrities.

Event calendars and date pickers are really useful plugins for web applications. WordPress does have a date picker, which allow bloggers to schedule the article.

I am a big fan of jQuery, so i always use jQuery Calendar plugins to accomplish my tasks when the clients asked me to implement an event caldendar for them. In this article, i would like to share 9 really useful jQuery Event Calendar and Date Picker plugins that every web designers and developers should know.

1. FullCalendar

FullCalendar is a famous jQuery calendar plugin which offers features like drag-and-drop, integration with Google Calendar and able to fetch events through JSON. Designers can easily customize the look and feel of the calendar, while developers can utilize the exposed hooks for user-triggered events.
FullCalendar

2. Astonishing iCal-like Calendar

This is a tutorial which uses both jQuery and CSS to build an iPhone styled calendar application. The author also implement the Coda-like effect for the popup event.
Astonishing iCal-like Calendar



3. jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds date picker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
jQuery UI Datepicker

4. jMonthCalendar

jMonthCalendar supports full month calendar and events. The interesting part of this plugin is it allows developers to interact with the calendar.
jMonthCalendar

5. Date Picker

Date Picker is a jQuery calendar plugin released under MIT and GPL licenses. It has a lot of options and features. For example, you can have multiple calendars in the component, mark dates as special days, easy to customize through CSS and allow different selection modes. All these can be easily setup though the configuration options.
Date Picker

6. jQuery Week Calendar

jQuery Week Calendar is a plugin which will include a weekly calendar in the web application. The events can be supplied as an array or JSON, and these events can be easily drag, drop and resize. There are a lot of options and event callbacks which you can refer through the official plugin page.
jQuery Week Calendar

7. Simple jQuery Date-picker Plugin

This is a very simple date picker plugin. However, it provides a lot of useful and necessary features for a date picker. For example, you can easily navigate to the months and years through the drop down selection boxes.
Simple jQuery Date-picker Plugin

8. jQuery Date Picker Plugin

This is an clean, unobtrusive plugin for jQuery which allows you to easily add date picker to your web forms and pages. There are a lot of configurations and options for this simple plugin. You can refer to the plugin page for more examples of how to use this plugin.
jQuery Date Picker Plugin

9. jQuery Interactive Date Range Picker

This powerful date range picker is a modified version of jQuery UI’s Datepicker component. It has a quicker date selection from a list of preset dates/ranges and a smooth transitions. The latest version uses the jQuery UI 1.7 and jQuery UI CSS Framework. With the power of jQuery UI, user can now switch the calendar theme easily.
jQuery Interactive Date Range Picker

We regularly update articles about resources, tutorials and Wordpress to help designers and developers. If you are new to WebDesignBooth, why not subscribe to our RSS feed and get the latest updates immediately. You can also subscribe through email or follow us on Twitter.
  • http://www.news-library.com Siddhesh

    such a nice plugin.. :)

  • http://stefanm.wordpress.com/2009/09/21/cool-articles-%e2%80%93-seo-blogging-internet-marketingseptember-07-20-2009/ Cool articles – SEO, blogging, internet marketing(september 07-20, 2009) « Stefanm, my link collection

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers(like FullCalendar, jQuery UI Datepicker, jMonthCalendar); [...]

  • http://cssbrigit.com/CNews/entrada/2009092019325364 CSS Brigit | 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers

    9 Useful jQuery Calendar And Date Picker Plugins For Web Designers…

    Implementing calendar in the web application is so easy by using jQuery event calender and date picker plugins….

  • http://choosedaily.com/1362/9-useful-jquery-calendar-and-date-picker-plugins/ 9 Useful jQuery Calendar And Date Picker Plugins | Choose Daily

    [...] 9 Useful jQuery Calendar And Date Picker Plugins [...]

  • http://identi.ca/notice/10449734 Andrés Felipe Vargas (andphe) ‘s status on Monday, 21-Sep-09 14:24:44 UTC – Identi.ca
  • http://design-newz.com/2009/09/21/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers | Design Newz

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://webdesign.populoo.com/2009/09/20/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers » Web Design

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://www.tripwiremagazine.com/news/news/30-very-useful-articles-for-designers-and-developers.html 30+ Very Useful Articles for Designers and Developers | tripwire magazine

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://www.roaldcraenen.nl Roald

    Indeed.. a very nice plugin! jQuery rocks!

  • http://www.favshare.net favSHARE

    This article has been shared on favSHARE.net. Go and vote it!

  • http://joyoge.com joyoge bookmark

    useful resources, thanks

  • http://blog.davebonds.info/links-for-2009-09-23/ links for 2009-09-23 | Digital Rehab

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers (tags: jquery Calendar plugins javascript datepicker calendars webdesign) [...]

  • http://www.tripwiremagazine.com/news/news/80-stunning-articles-for-designers-and-developers.html 80+ Stunning Articles for Designers and Developers | tripwire magazine

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://pc-aras.com/en/2009/09/25/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers | pc-aras

    [...] :: webdesignbooth Share and [...]

  • http://wiki.laroouse.com/2009/09/9-adet-guzel-jquery-takvim-eklentisi-htt/ 9 adet güzel jQuery takvim eklentisi htt… « wiki.laroouse

    [...] adet güzel jQuery takvim eklentisi http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ 0 people like this post. Like  [...]

  • http://lewayotte.com/2009/09/27/notable-tech-posts-2009-09-27/ Notable Tech Posts – 2009.09.27 | The Life of Lew Ayotte

    [...] 9 Useful jQuery Calendar and Date Picker Plugins for Web Designers [...]

  • http://www.elwebmaster.com/articulos/jquery-9-plugins-para-crear-calendarios-y-seleccionadores-de-fecha jQuery: 9 plugins para crear calendarios y seleccionadores de fecha – elWebmaster.com

    [...] Fuente: WebDesign Booth [...]

  • http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/my-favorite-creative-links-of-the-week-8/ My Favorite Creative Links of the Week | Programming Blog

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://www.open-open.com/ajax ajaxg
  • http://cleartypemedia.com/press/2009/10/weekly-round-up-oct-16-09-edition/ Weekly Round-up ~ Oct 16, 09 Edition | ClearType Press – Building a Better Government Web

    [...] 9 Useful jQuery Calendar and Date Picker Plugins for Web DesignersjQuery makes front-end development much easier. This article contains some very nice Calendar picker plugins. [...]

  • http://giridhar.wordpress.com/2009/10/29/links-for-2009-10-29/ links for 2009-10-29 « Giri’s Blogmarks

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers (tags: jquery calendar plugins javascript) [...]

  • http://www.geeksucks.com/showcases/14-great-posts-on-jquery-plugins.htm 14 Great Posts on jQuery Plugins – Showcases – Geek Sucks

    [...] 7. 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://lewayotte.com/2009/11/01/notable-tech-posts-2009-11-01/ Notable Tech Posts – 2009.11.01 | The Life of Lew Ayotte

    [...] 9 useful jQuery calendar and date picker plugins for web designers [...]

  • http://www.kroativ.net/w3-resursi/nova-godina-resursi-za-dizajnere-year-2010-mega-resources/ 2010 – New year mega design resources, resursi za dizajnere | Kroativ
  • http://blog.anadikt.ru anadikt

    very nice… thanx

  • http://bloggeriz.0fees.net/?p=3 14 Great Posts on jQuery Plugins « Premium Desing

    [...] 7. 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://tweeaks.com/development/40-jquery-plugins-tutorials-resources-and-tools-of-2009/ 40 jQuery Plugins, Tutorials, Resources And Tools Of 2009 | Tweeaks Design

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://pixelco.us/blog/9-plugins-jquery-para-calendarios-y-selectores-de-fecha/ +9 Plugins jQuery para calendarios y selectores de fecha | pixelco.us blog

    [...] post está basado casi en su totalidad en: 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers de WebDesignBooth. // < ![CDATA[ // < ![CDATA[ // < ![CDATA[ // < ![CDATA[ google_ad_client = [...]

  • http://www.afiffattouh.com/web-design/slidedeck-%e2%80%93-cool-jquery-plugin-for-slideshow SlideDeck – Cool jQuery Plugin For Slideshow | Afif Fattouh – Web Specialist

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers [...]

  • http://www.waynefarley.com Wayne Farley

    Some quite useful resources!

  • http://www.webdesignbooth.com Dicky

    Hi Wayne,
    Nice design and i like the tooltip effect. What is the plugin that you use to create the tooltip effect?

  • http://www.tamil-movie.net tamil movie

    good collection of jquery calenders nice :)

  • http://www.naumanakhtar.com Nauman Akhtar

    They are all very old fashioned, can you piost some new designs and effects please ?

  • http://www.laplacesdemon.com/programming/jquery-calendar-olaylari/ JQuery Calendar Olayları » laplace’s demon

    [...] ihtiyacım olduğu için araştırdım. Çünkü js kısmına çok vakit ayırmak istemiyorum. şöyle bir araştırma içinde 9 adet calendar uygulaması var. Bunlardan benim hoşuma gidenler [...]

  • Cal

    Here is another one that might be worth checking out. Looks like Google Calendar.

    http://code.google.com/p/jquery-frontier-calendar/

  • http://5kai.com/post/574 9个实用jQuery日历插件

    [...] 查看原文 cssjquery插件日历设计 [...]

  • http://www.wowhtml5.com/?p=884 ” 9个实用jQuery日历插件– HTML5,CSS3,WEB前端设计开发资讯站
  • http://www.lamolabs.org/blog/3865/delicious-bookmarks-for-july-7th-from-1839-to-2046/ Delicious Bookmarks for July 7th from 18:39 to 20:46 « Lâmôlabs

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers – July 7th %(postalicious-tags)( tags: jquery calendar javascript plugins webdesign datepicker calendars plugin date )% [...]

  • http://www.balupton.com Benjamin “balupton” Lupton

    jQuery Sparkle includes a very nice and slim jQuery Events Calendar based on the jQuery UI DatePicker. So you can highlight days of the jQuery UI DatePicker which have events and assign events to them – such that you could use onmouseover to display information about the events on that day.

    As it is built on the jQuery UI DatePicker you could also use it to select days and use all the power and customisation as the DatePicker naturally has! It also supports AJAX or JSON objects to recieve data about the events.

    You can find a demo of this functionality right here: http://www.balupton.com/projects/jquery-sparkle/#eventcalendar (should be right down the bottom last time I checked)

    It’s open source under the AGPL licence, so you can feel free to grab what you need out of it worry free! :-) It’s also actively developed on a day to day basis so you will never be short on support.

    But most importantly it is a DRY Plugin/Effect Framework to allow you to develop plugins and extensions much more easily. So hope this helps to achieve that goal!

    You can find more about jQuery Sparkle, and see some its demos right here at its homepage: http://www.balupton.com/projects/jquery-sparkle

    Hope it’s found useful by others too!

  • http://jquery13.blogspot.com Aman

    hi

    i like all jQuery date picker.i have also some collections of jQuery colander or jQuery date picker. Please see here:-

    http://jquery13.blogspot.com/2010/08/30-jquery-calendar-and-jquery-date.html

    Thanks
    Aman

  • http://www.web-delicious.com Steven

    We are working on a jquery based event calendar with month/week/daily view, which is call wdCalendar. It is very simple to to integrate wdCalendar with a database. You may download it at our web site:www.web-delicious.com.

  • http://www.thefunLearning.com Justin

    Thanks for this article. Very good explanation of JQuery Calendar controls

  • http://aspnet-ajax-aspnetmvc.blogspot.com Mohan Prajapati

    Hello friends,

    I have tried to implement date range picker control. You can get the code at this link
    http://aspnet-ajax-aspnetmvc.blogspot.com/2010/09/jquery-date-range-plug...

    Please suggest me to make it more better.

    Thanks,
    Mohan Prajapati

  • http://www.web-delicious.com bobo

    why did you add wdCalendar, a very powerful event calendar there!

  • phuong

    great! and thanks.

  • http://tgarcia01.wordpress.com/2010/10/19/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers « Terremoto BCN

    [...] 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers. [...]

  • http://foros.softonic.com/programacion/insertar-calendario-reloj-pagina-web-110685#post866044 Anonymous

    [...] [...]

  • guest
  • http://www.creativelanka.com/ web design kalinga

    This is more useful article. This helps for my development works.

  • http://phi-phi.org Phi Phi

    a very nice plugin!.Go and vote it!

  • http://www.flash-image-editor.com taoomg

    wdCalendar is a jquery based google calendar clone. It cover most google calendar features.

    * Day/week/month view provided.
    * create/update/remove events by drag & drop.
    * Easy way to integrate with database.
    * All day event/more days event provided.

  • http://www.dcs-solution.com DCS Solution

    Hi, check out our jQuery Event Calendar: http://www.dcs-solution.com/blog/?p=22#more-22

  • Kovács Levente

    If you’re developing for touchscreens try this component
    http://code.google.com/p/mobiscroll/It was specially designed for touch devices, works well with android, iOS. jQuery ThemeRoller ready!

  • Ocean

    longtime I was looking for nice script for my site http://www.5starstour.com, now I had thank jquery

  • Sarmad nazir

    Nice…!:)
    ————————————————
    http://www.mscyber.com free registered software download

  • Sarmad nazir

    Nice…!:)
    ————————————————
    http://www.mscyber.com free registered software download

  • Bhutanihoney

    I have integrated the “jQuery Interactive Date Range Picker”
    in my webpage. Now I
    want to customize it. But somehow I cannot.

    My problem goes like this:

    Selected is shown by orange highlightingMy preset are,
    Week – Select the current week from Sunday to Saturday and
    then allows the user to select any other week range where Sunday to Saturday
    will be selected
    Month – Select the entire current month and then allows the user to flip months
    where the entire month block is selected.

     

    How to do this, can anyone help me out.

    Thanks in advance.

  • Anonymous

    Well.. i must say that you have done a great job by putting all the available calenders under one post. However, I personally like the jQuery UI date picker. I have also posted series of articles on jQuery UI datepicker.

    http://jquerybyexample.blogspot.com/search/label/jQuery%20DatePicker

  • http://www.mymemory.com/en/products/calendars photo calendar

    asassssssssss

blog comments powered by Disqus