DojoX Calendar widget committed

Following on from my previous post about the cool new Calendar widget I wrote for the Dojo Ajax toolkit, the initial version has now been committed to the DojoX project.

Check out the calendar test page at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_Calendar.html

Check out the dropdown date text box at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_DateTextBox.html

Some more work still has to go into the widgets, including allowing individual dates to be highlighted for specific event, and perhaps including a refactoring into a series of mixin classes, but it should be in great shape for 1.2!

Sexy new Calendar widget for Dojo

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;

Hopefully this will make it’s way into the DojoX project fairly soon, and be available for general use.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt