Sexy new Calendar widget for Dojo

Posted by Shane O'Sullivan on 24 March, 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
The day, month and year views of the calendar widget

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;

This entry was posted on 24 March, 2008 at 9:52 pm and is filed under Ajax, Calendar, Date Picker, Dojo, Javascript, Technical, dijit, dojox, open source. . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Sexy new Calendar widget for Dojo”

Dojo 1.1 is cooked and ready to eat! « SOS Says:
28 March, 2008 at 12:06 pm
[...] Posts Sexy new Calendar widget for DojoIntroducing the new Dojo Image WidgetsVery powerful Javascript compressor called Packer [...]
DojoX Calendar widget committed « SOS Says:
11 April, 2008 at 10:05 am
[...] Posts Sexy new Calendar widget for DojoDojoCampus - The best Dojo learning resourceWriting a Django Template Widget With Dojo Data [...]
Larry Says:
5 May, 2008 at 2:59 am
Very nice…. A couple of suggestions:

- For the month view, it may be easier to show the months going top left to bottom right? The four columns would naturally correspond to the four quarters. I don’t know, for me, the month view got me a little bit disoriented as it is.

- It’s be nice to have an accompanying compartment to select a time too
Shane O'Sullivan Says:
5 May, 2008 at 11:56 am
Hi Larry,

Thanks. For the months, I think it reads better left to right (unless you’re Chinese or middle eastern of course). As for the time, yes, that would be good, and is something I’m thinking about.

I’ve rewritten the code so it is much more customizable, and hopefully this will be checked in soon. It should make it simple to write your own views and mix’n'match them however you like.

Thanks

Shane