SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for the ‘Calendar’ Category

dojox Calendar updated

Posted by Shane O'Sullivan on June 13, 2009

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.

You can either check out the file from source control, or grab it from here – http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/Calendar.js any time from Sunday June 14th.

Posted in Ajax, Calendar, Dojo, Javascript | Leave a Comment »

Cool Portlets in Dojo

Posted by Shane O'Sullivan on March 11, 2009

I’ve been working on writing Portlets for the Dojo Ajax Toolkit for a while now, and they’re almost ready.

You can see a demo of it at http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria

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.

Posted in Ajax, Atom, Calendar, chart, charting, Date Picker, demo, dijit, Dojo, dojo.charting, dojo.data, dojox, open source, widget | 72 Comments »

DojoX Calendar widget committed

Posted by Shane O'Sullivan on April 11, 2008

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.

dojox.widget.Calendar

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!

Posted in Ajax, Calendar, Dojo, dojox, Javascript, open source, Technical | 19 Comments »

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
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;

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

Posted in Ajax, Calendar, Date Picker, dijit, Dojo, dojox, Javascript, open source, Technical | 62 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: