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
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!
Brad Neuberg said
Nice work.
Shane O'Sullivan said
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.
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.
Shane O'Sullivan said
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.
Shane
Mantas said
Hi,
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?
Shane O'Sullivan said
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
Shane
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:
dojo.require("dojo.date.stamp");
var dateObject = new dojo.date.stamp.fromISOString('2008-07-11');
var Calendar = dijit.byId('cal');
Calendar.setValue(dateObject);
Other source is the same as from test case.
Shane O'Sullivan said
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
console.log(dateObject)
Also, are you seeing any exceptions being thrown? For example, if dijit.byId didn’t retrieve the widget correctly.
Shane
Mantas said
dateObject output is okey. When I put:
var Calendar = dijit.byId('cal');
Calendar.setValue(dateObject);
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.
Shane O'Sullivan said
Hmm, strange. Can you log a bug at bugs.dojotoolkit.org and I’ll look into it? Log in with guest/guest.
Mantas said
Ok, just done it – http://bugs.dojotoolkit.org/ticket/7419
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 pdhinoja@gmail.com. I have used this widget in my application at many places with DateTextbox and now I realized it is clipping in IE.
Shane O'Sullivan said
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
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.
lukas hanacek said
sorry didnt realize it will skip the code, the example was about the footer inside div element without any class
Shane O'Sullivan said
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?
Thanks
Shane
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 dojo.style, 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.
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.