Fantastic, Free Calendar and Datepicker Scripts

May 24 2008 by Jacob Gube | 18 Comments

Web applications often require a calendar or datepicker functionality. Whether it’s a web form that requests the user’s date of birth, a content management system that needs to display a calendar of events on a side column, or an application that charts data as a function of time – there’s never a short supply of demand for calendars or datepickers.

To write a custom solution yourself is one option, especially if you have the time, and your requirements can’t be met by freely available scripts. But if you’re the type that wants to save some time – check out these brilliant, free calendar and datepicker scripts available for download. You can use them for inspiration, incorporate them into your project as they are, or modify them to suit your needs.

Calendar: a Javascript class for Mootools

Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements - Screen Shot

The Calendar class for mootools is a script that plugs into the mootools framework, providing you with an accessible, unobtrusive datepicker for your web forms. The Calendar class gives you three navigation options: navigate by month, navigate by month or year, and static/no navigation. It supports multi-lingual and fancy date formatting features, and also allows you to restrict the range of available dates that the user can select. The script weighs at about 15KB compressed with the YUI compressor, but you can download the uncompressed version with the developer’s comments if you want to modify it or understand how it works.

MooMonth

MooMonth - Screen Shot

MooMonth is a full calendar application with smooth animation effects and is highly-customizable to your web application’s needs. Clicking on certain areas such as the day or event expands (or collapses) the area to focus on the particular date. It’s still in the alpha phase, but brief testing under Firefox 2, IE 7, and Safari 3 indicates that the current version works as intended.

MooMonth Demo

Monket Calendar

Monket Calendar - Monket - Screen Shot

Monket Calendar is a robust, Ajax-enabled calendar that uses PHP for its dynamic features. Several things such as drag-and-drop events, ability to create multi-day events, and its iCal-style interface makes Monket Calendar a promising option for providing task and events capabilities to your web applications. Monket calendar requires PHP 4 and up, as well as Apache with RewriteRules enabled to work. Additionally, it’s still in beta phase so there may be some cross-browser issues with the current Beta 0.9.1 release.

Monket Calendar demo

Datejs

Datejs - A JavaScript Date Library - Screen Shot

Datejs is a simple yet elegant date library. The user inputs date queries such as “today“, “+5years“, “6/4/2005” and Datejs attempts to match it with relevant date results. Datejs can be used in an assortment of ways and is limited only by the developer’s imagination – from auto-suggesting/auto-filling web forms to searching a database of dates for relevant results based on contextual searches. Though still in its alpha release, the author states that “Datejs has passed all trials and is ready to strike”.

Swazz Javascript Calendar

Swazz Javascript Calendar - Screen Shot

Swazz Javascript Calendar is a simple, lightweight JavaScript datepicker widget for use in form fields. It’s been tested for compatibility in IE6 and 7, Firefox 1.5 and 2.0, and Safari. It requires no additional JavaScript framework/library, thus making it a top-notch solution for those concerned about page weigh and bloat (it’s about 6KB).

jQuery UI Datepicker

jQuery UI Datepicker - Screen Shot

jQuery UI Datepicker is a plugin written on top of the jQuery library and has an innumerable amount of features, configurations, and uses. It provides keystroke functionalities for keyboard-driven navigation and control, localization for a wide selection of languages – and with jQuery included – the developer has access to a robust library for custom modification of its default options.

Calendar Slide Select

Calendar Slide Select : A Component to mimic Google Analytics date chooser behavior. : Position Absolute - Screen Shot

Calendar Slide Select mimics the Google Analytics date range chooser. This component is ideal for date range selection user interaction, such as allowing the user to select a time period to display statistics or graphs over time. Calendar Slide Select requires the Prototype JavaScript framework.

JavaScript Calendar Component

JavaScript Calendar Component - Screen Shot

Calendar Component, developed by NoGray (a web design and development firm) is a customizable calendar that uses mootools. The Calendar Component allows you to specify special events and holidays, select multiple dates, and translate data into different languages using Google translation. The provided external stylesheet file allows you to skin the theme of your calendars quite easily.

Vista-like Ajax Calendar

The Vista-like Ajax Calendar is inspired by the Windows Vista task bar calendar. It employs mootools and PHP to give the user a simple-to-use calendar that has transition effects and speedy navigation between months, years, or decades. The Vista-like calendar is licensed under the Creative Commons Attribution-NonCommercial license which allows you to freely use the script for non-commercial purposes as long as the author is given proper credit for the work.

Vista-like Ajax Calendar demo

Unobtrusive Date-Picker Widget

frequency decoder ~ Unobtrusive Date-Picker Widget Update

The Unobtrusive Date-Picker Widget is an accessible script packed with terrific features. It has full keyboard control options, support for multiple date formats, disabling of certain dates, and “smart” localization which tries to automatically guess which language the user prefers. It currently supports 16 languages including English, Spanish, French, and Hebrew. If the language you prefer isn’t available, you can quickly create a language file using the template provided.

Unobtrusive Date-Picker Widget demo

If you liked this post, you may also be interested in the following articles:

18 Comments

Sachleen Sandhu

May 24th, 2008

Wow, thanks for the list. I have been looking for a good calendar script to use.

Matt

May 24th, 2008

Thanks for the list, I personally have only used jQuery. Might try some of these others in the future.

liam

May 25th, 2008

Wow, this really will come in handy, thanks for sharing.

gkriv

May 31st, 2008

Excellent list of calendar options.

Marc

June 3rd, 2008

jQuery UI Datepicker FTW!

Nate Koechley

June 9th, 2008

Hey,

Disclaimer: I work on Yahoo!’s YUI team.

Thanks for posting this collection. There are a few here that I hadn’t see before, so thanks for sharing.

@Mike: thanks for the YUI Calendar mention :) .

@Marc: Did you write the jQuery UI Datepicker? Nice job, if so.

Thanks,
Nate

Jacob Gube

June 9th, 2008

@Mike: YUI is definitely a great option, plus with the ability to serve it from the YDN makes it even better… thanks for the reminder!

@Nate Koechley: How do you feel about the Google Ajax Library API? It sounds familiar doesn’t it… providing access to a high-performance infrastructure so that the scripts are always available and easily maintainable, wonder who gave them that idea… :)

Nate Koechley

June 9th, 2008

@Jacob Gube,

I think it’s great that Google is providing access to libraries via their Content Distribution Network (CDN). Anything that gives developers more tools and options is good for the health of the internet. And the health of the internet is what we are all working for.

You’re right that Yahoo! has been freely hosting YUI on our CDN resources for well over a year.

But for the record, Dojo was the first library offered on a free CDN: AOL hosts Dojo.

Thanks,
Nate

Biber Hapı

September 6th, 2009

Excellent list of calendar options.

ardianz

April 28th, 2010

excelent brad!., thx for the info., i’ll try it

Ünal the Orionsbelt

May 5th, 2010

I wish you had add all date-picker’s browser compatibility…

Elis

March 4th, 2011

I personally have only used j Query. Might try some of these others in the future. Anything that gives developers more tools and options is good for the health of the internet

yinka

April 13th, 2011

I need just one good date picker script, but i got several here. Thanks.

Levi

July 6th, 2011

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!

placidius

November 24th, 2011

attractive datepicker!!

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify