Visits to this blog

Archive for the ‘Calendar’ Category

Today I checked in some bug fixes and performance enhancements for the dojox.widget.Calendar widget. If you’re currently using version 1.3 or later, I strongly suggest you grab it, as it addresses an annoying bug with displaying the wrong selected date.

A Portlet is similar to a dijit.TitlePane, in that it has a title bar, a content area, and is collapsible. However, it should also have the option of being configurable, perhaps using a dialog box or an expandable area. A nice example is the BBC website at http://bbc.co.uk, or the Google Portal http://www.google.com/ig.

Portlets are generally presented in a draggable grid, and a very cool new addition to Dojo is the dojox.layout.GridContainer, which provides this framework.

A number of types of Portlets and Setting widgets will be provided, hopefully in v1.4 (1.3 is in final beta, so this is too late for that).

dojox.widget.Portlet – this is the basic Portlet, which provides a close button, a collapse button, and a settings button. All of these are optional.

dojox.widget.FeedPortlet – this Portlet loads an external Atom or RSS feed and displays it as a list. Hovering over an item shows a dijit.Tooltip with a summary of the news story.

dojox.widget.ExpandableFeedPortlet – similar to FeedPortlet, but instead of using tooltips, a toggle icon is used to show more or less of a news story.

dojox.widget.PortletSettings – a widget that can be placed inside a Portlet to provide customizable settings for that widget.

dojox.widget.PortletDialogSettings – like PortletSettings, but the configuration options are displayed in a dijit.Dialog.

dojox.widget.PortletFeedSettings – provides one or more URLs to Atom or RSS feeds for a FeedPortlet to load.

These widgets offer pretty large set of functionality, which should be sufficient for the majority of peoples needs. However, this is still in active development, and if you have any ideas for cool additions or changes I could make, please let me know.

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!

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.

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;