Sexy new Calendar widget for Dojo
Posted by Shane O'Sullivan on March 24, 2008
I’ve submitted a sexy new Calendar widget to the Dojo Toolkit, called dojox.widget.Calendar. Check out a test page for it at http://www.skynet.ie/~sos/js/demo/dojo/dojox/widget/tests/test_Calendar.html. The ticket tracking it is at http://trac.dojotoolkit.org/ticket/6297.
The features of this calendar widget are:
- Day view – the standard view, showing all the days in a month
- Month view – lists the twelve months of the year.
- Year view – lists all the years that can be chosen.
- Cool animations between these views.
- Cool animations when moving from month to month, and from year to year.
- Cool animations when moving the mouse over the widget, courtesy of the dojox.widget.FisheyeLite widget. (tired of cool animations yet? Nah, me neither)
The daily, monthly and yearly views of the Calendar
I was inspired to write it after seeing the very cool Calendar widget in the AjaxControl Toolkit, a .NET Ajax framework, which made me think “I wonder how long this would take to write with Dojo?“, taking into account the obvious: not a single line of code could be copied from the original.
The answer turned out to be about 3 hours or so, since Dojo already provided the majority of what I needed.
- All the Date-related heavy lifting is done with dijit._Calendar, the existing Dojo calendar widget. This also handles the majority of the localisation issues.
- Most of the animations are done using the dojo.animateProperty function.
- Generating the HTML of the widget is mostly taken care of by the standard Dijit templating system.
What remained to do was changing the exiting dijit._Calendar HTML template to give a month and year view, and fiddling with CSS to get it looking right. A textbox popup widget was also submitted to integrate the Calendar with a text input field, called dojox.form.DateTextBox;