Open Source Resources for Web Application Developers

The Any+Time JavaScript Library includes an easy-to-use, easy-to-customize calendar widget (date and/or time picker) and a powerful Date/String parse/format utility. ATWidget is the AJAX-capable JavaScript GUI component. It is easy to add to a page and even easier to use! Unlike most date/time selection tools, nearly every field in an ATWidget control can be chosen with a single mouse click.

The ATWidget date/time control is attached to any input (text) field with a single line of JavaScript code. It can be placed as a popup or inline. The appearance of the ATWidget calendar tool can be customized by modifying or supplementing the included CSS stylesheet. All labels, as well as month, weekday and era names and abbreviations, are also easy to change.

Requirements: Prototype Framework
Demo: http://www.ama3.com/anytime/
License: Creative Commons License

After the success of Vista-like Ajax Calendar, dev.base86 has recently released Calender Eightysix. It is completely built from scratch with pure javascript, making use of some of the superb features the latest MooTools javascript framework has to offer.

Calender Eightysix is an unobtrusive developer friendly javascript calendar and datepicker offering a better user experience for date related functionalities. Calendar Eightysix has a variety of options to style and format the calendar to your needs. This is done by providing options while instantiating the class.

Requirements: Mootools Framework
Demo: http://dev.base86.com/scripts/datepicker_calendar_eightysix.html
License: Creative Commons 3.0 License

Nettus has published a tutorial: Learn how to Create a Retro Animated Flip-Down Clock. In the tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, we are trying to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website.

The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes.

Requirements: Mootools Framework
Demo: http://nettuts.s3.amazonaws.com/470_clock/Source/index.html
License: License Free

jQuery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible. It is a simple 2-click in place editing time picker and regular time picker.

It is unobtrusive and degrade gracefully. It has intuitive keyboard navigation support as well. jQuery.timepickr has just released Version 0.7 with the support of jQuery UI theme switcher. You can play around it with different themes offered.

Requirements: jQuery Framework
Demo: http://haineault.com/media/jquery/ui-timepickr/page/
License: MIT License

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.

Calendar events can be supplied as an array, url or function returning json. They 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. The jquery-week-calendar plugin is also 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.

Requirements: jQuery Framework
Demo: http://jquery-week-calendar.googlecode.com…
License: MIT License

MattBango has shared his approach to creating a timeline out of CSS and HTML. The Pure CSS Timeline is a simple and clean looking timeline with some very straight forward markup. We have a nice looking timeline styled completely with CSS, but what happens if the visitor doesn’t have CSS enabled? Since we used unordered lists, we still have a nicely accessible list of events.

The Pure CSS Timeline may not be the perfect solution markup wise and CSS wise, but it gets the job done and is still quite accessible for all users. Take the timeline a step further. You could add some Javascript interactions, tooltips, animations, etc.

Requirements: -
Demo: http://mattbango.com/notebook/web-development/pure-css-timeline/
License: License Free

UNIQLO has just released a Calendar Blog Parts, which displays a beatiful Flash calendar with the weather forcast. You can select the country appears on the calendar. You can also set the Background Music On/Off. There are Small and Large size available at the moment.

UNIQLO Calendar Blog Parts has been tested on Internet Explorer 6+, Firefox 1.5+ and Safari 1.3.2+. You can easily integrate the calendar on your blog, Myspace, Facebook, iGoogle and etc… Simply paste the generated code on your site, you will get a pretty calendar as follow.

Requirements: Flash Required
Demo: http://www.uniqlo.com/calendar/
License: License Free

dhtmlxScheduler is a web-based event calendar which provides simple in-browser scheduling solution. With smooth Ajax-enabled interface dhtmlxScheduler allows users to add, modify or delete events without refreshing the web page.

Intuitive drag-n-drop behavior gives the possibility to change events date and start/end time by simply dragging the event boxes. The calendar events can be displayed in Day/Week/Month views.

dhtmlxScheduler is very lightweight (about 19KB gzipped), cross-browser and highly customizable. Each aspect of the calendar interface can be configured through JavaScript API. Developers can easily add/update events, change date format, time scale or calendar language.

Although dhtmlxScheduler is a pure JavaScript solution, it can be easily connected to the backend database with the help of dhtmlxConnector, a PHP extension that enables data communication between client-side interface and server-side datasource.

You can also use your own server-side code written in any language (PHP, Java, ASP, etc.) to bind scheduler content to the database. dhtmlxScheduler is distributed under GNU GPL and commercial licenses.

Requirements: -
Demo: http://dhtmlx.com/docs/products/dhtmlxScheduler…
License: GPL and Commercial Licenses

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

FullCalendar is great for displaying events, but it isn’t a complete solution for event content-management. Beyond dragging an event to a different day, you cannot change an event’s name, time-of-day, or other associated data. It is up to you to add this functionality through FullCalendar’s event hooks.

Requirements: jQuery and jQuery UI Framework
Demo: http://arshaw.com/fullcalendar/
License: MIT, GPL License