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

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.


Check out the calendar test page at

Check out the dropdown date text box at

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!

19 Responses to “DojoX Calendar widget committed”

  1. Nice work.

  2. Thanks Brad – it’s been completely rewritten since this post, so it should be much more extensible. It uses different “views” that can be conditionally mixed in, which of course opens the possibility that users can write their own version of the “day”, “month” and “year” view, or whatever they like. It also makes the FX applied to the calendar mixable, so users can easily customise it.

    It’ll be cool when people start using it (and when that patch is merged)!

    • J Wang said

      We are using the dojox widget calendar to display a calendar to allow a user to click on a date to see some events for that date. Each event also contains an event type. There is also a drop down list to allow a user to select an event type from the list. This drop down list is implemented using HTML select option, and it is placed just above the Calendar view. My questions are:

      1) When a user selects an event type from the drop down list, the calendar is supposed to be refeshed and display a new calendar view for the events related to the selected event type. Is there a way to trigger/cause the dojo calendar to be refreshed whenever a user selects an event type from the drop down list? Please provide some sample code.

      2) By default, the today’s date is being displayed below the Calendar view. Is there a way to display the today’s date above the Calendar view? Or just to hide the today’s date? Please provide some sample code.

      Appreciate your help on this.

  3. Brendan said

    Hi Shane – I didn’t realise you had this blog – nice stuff! Does this support non-gregorian calendaring? I mean things like the Hijri dates, etc.

  4. Hi Brendan,

    This blog is the reason I was poached away from IBM πŸ™‚ The ironic thing is that I was encouraged to start an external blog by Carol and Rob in order to increase external exposure for tech I was working on. Life is odd!

    As for the calendar, it supports all the locales that Dojo does, and uses Dojo’s localisation functions for everything it displays. I know this definitely supports locales like Chinese, and obviously all the European ones. Not sure about non-gregorian though.


  5. Mantas said

    I need help with your widget. How can I change the default date. What I mean is that every time you load the window, calendar displays todays date and I want it to display e.g. yesterdays date. I tried almost everything (including .setValue function and so on) and it just doesn’t work. Can you give me an example?

  6. Hi Mantas,

    Can you post the code you are using? The setValue function should work. Are you passing a Date object to it, or a string? It expects a Date object


  7. Mantas said

    I’m a bit noob at Dojo, so the problem probably is that I don’t know how and where to use setValue function. I tried some variants, but the last one was adding these lines:

    var dateObject = new'2008-07-11');
    var Calendar = dijit.byId('cal');

    Other source is the same as from test case.

  8. Try printing out the date object you retrieve from the from ISOString function to make sure it is valid. To see it in firebug, type


    Also, are you seeing any exceptions being thrown? For example, if dijit.byId didn’t retrieve the widget correctly.


  9. Mantas said

    dateObject output is okey. When I put:

    var Calendar = dijit.byId('cal');

    in dojo.addOnLoad.. then after the load calendar shows todays date and instantly changes to the month from dateObject, however, the highlighted days stays the same.

  10. Hmm, strange. Can you log a bug at and I’ll look into it? Log in with guest/guest.

  11. Mantas said

    Ok, just done it –

  12. parimal said

    this calendar does not work in IE when any theme(tundra,nihilo,soria) is applied in body tag. in IE one column from left is clipped. In FF it is working fine. Please suggest the solution.
    Also you can mail me at I have used this widget in my application at many places with DateTextbox and now I realized it is clipping in IE.

  13. I have submitted a patch for 1.3 that reworks all the CSS for the calendar, so that it works with all three streams, tundra, nihilo and soria. Hopefully it’ll be merged soon.

    Let me know if you want me to send you the updated CSS file, so you don’t have to wait for v1.3

  14. lukas hanacek said

    Ii is really nice dojo work, unfortunatly I had to try to style it with my own css and it is close to nightmare. Would be really helpfull if each div has its own class, things like these

    Today: Thursday, March 19, 2009

    make me pretty unhappy. What would also help is to have each text inside span tag.

  15. lukas hanacek said

    sorry didnt realize it will skip the code, the example was about the footer inside div element without any class

  16. Hi Lukas,

    What are you trying to do with styling? The Calendar provides three different themes, for Tundra, Nihilo and Soria, the three current Dojo themes, so it is definitely themeable to a certain extent.

    Can you give me specific examples of things that you are unable to do with the Calendar?



  17. lukas hanacek said

    the scenario is that I have design from a graphic and I have to keep it so I cannot use any of the prepared css although they are definetly very nice πŸ™‚ The first problem is the width of the calendar itself, which is not very nice to overwrite via, I dont see reason why it is there in the style attribute.

    Other things like colors, paddings, margins, because of the ie are pretty hard to change when texts are directly under div elements. The example may be the text in the calendar footer. If it was inside span, I can put there display: block and use it to create desired margins and paddings, which the current html doesnt let me. Of course I can edit directly the Calendar.js but this is problematic at least because of the upgrades to newer versions.

    Now one last thing, a small wish πŸ™‚ Would be nice to have there fields for time and to be able to setup the output date format.

  18. Veera said

    Hi Shane,
    I find that the Calendar widget is not properly rendering on IE6.o, I am using dojo ver 1.31 and when i load the page in IE and access the calendar and when i move to the month/year view it is distorted ans\d the months/years are not clearly visible other than the current selected month/year.
    Please let me know how this can be fixed.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: