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
SOS 
Hello Shane,
in one of Your widgets I found a mixed view with four columns, two for 6 month each and another two columns for several yaers. In the bottom line of this widget a table row showing an OK and a Cancel button. The widget is called “MonthYearView” or similar.
Generally, I like this widget but I do not need the two buttons OK and Cancel. If I remove the … table row section responsible for the buttons, the widget does not work at all.
How can I get rid of those to buttons?
Can somebody help me.
Very nice…. A couple of suggestions:
– For the month view, it may be easier to show the months going top left to bottom right? The four columns would naturally correspond to the four quarters. I don’t know, for me, the month view got me a little bit disoriented as it is.
– It’s be nice to have an accompanying compartment to select a time too š
I am using dojo 1.7.0 with jsp. I am trying to enable only friday field in dojo calendar popup. would you please suggest the best way to achieve the same.? .
Hi Larry,
Thanks. For the months, I think it reads better left to right (unless you’re Chinese or middle eastern of course). As for the time, yes, that would be good, and is something I’m thinking about.
I’ve rewritten the code so it is much more customizable, and hopefully this will be checked in soon. It should make it simple to write your own views and mix’n’match them however you like.
Thanks
Shane
Hi Shane O’Sullivan,
How can I add events to the date?
Hi Zayar,
the widget has a ‘onValueSelected’ method that is called when a date is clicked. You can connect an event to this like:
dojo.connect(dijit.byId(“myCal”), “onValueSelected”, function(date){
alert(‘the date is ‘ + date);
});
This event will fire even if the date selected is the same as the current date.
To only fire the event when a new date is selected, connect to the “onChange” function instead.
Hi Shane,
Thank you for your response. I can manage to add the event now. If I want to add text such as appointment to the date, how can I add to the calendar?
Thanks again
Zayar
Hi Zayar,
You can add an effects layer to the calendar widget, e.g. to add a tooltip that displays appointments. See the CalendarFx.js file for an example of how this is done (this file adds some simple effects, nothing as complex as you are trying though)
Shane
It would be cool to have a “change month” event. “onChangeMonth” would be great š
Same for “year” etc…
Hi Apsy,
Yes, I can see how that could be useful, I’ll see what I can do. Obviously the same goes for onYearChange
Thanks
Shane
So sorry, this should go to dojo bug reports, but it is late, I’m tired, etc etc.
I think there is a bug in dojox calendar widget: YOu can’t set the selected date properly programmatically with setValue(…) (the highlight doesn’t change, while the month and year change properly).
Fix:
right after declaration of calendar day view (about line 370). my git diff shows:
diff –git a/root/js/dojo/grace/notes/Calendar.js b/root/js/dojo/grace/notes/Calendar.js
index c777122..3842cfe 100644
— a/root/js/dojo/grace/notes/Calendar.js
+++ b/root/js/dojo/grace/notes/Calendar.js
@@ -367,6 +367,7 @@ dojo.declare(“grace.notes._CalendarDayView”, [grace.notes._CalendarView, dijit._
setValue: function(value) {
//Change the day values
+ this.value = value;
this._populateDays();
},
You need the this.value to pick up the value in the _populateDays() routine, where selected=this.value, not this.getValue().
Or you could fix it with selected=this.getValue(), maybe?
HOpe that helps and makes its way into the tree, I’d hate to carry this patch just for this.
Hi James,
The setValue function you refer to is in a single Calendar “view”, and is not really meant to be exposed to you. You should really be using the base widget’s setValue.
However, all of this has been rewritten for 1.3, and the code has changed to:
selected = this.attr(‘value’)
Can you try out 1.3 (or the nightly trunk) and see if your problem has been solved?
Thanks
Shane
P.S. I agree that it makes no sense to not actually set the value in the CalendarDayView.setValue method, so I might change that.
Hi,
your Calendar looks really sexy. Unfortunately I’m new to Dojo and I don’t really understand how I could integrate it with the Dojotype DateTextBox. Is this already implemented or should I search a way to manually connect Calendar with a DatetextBox ?
Thanks,
Alan
Hi Alan,
You can use the dojox.form.DateTextBox
SHane
Hi Shane, thanks for your reply.
I just realized I was certainly confused between dijit.form.DateTextBox which I used for testing and dojox.form.DateTextBox which I don’t find documentation pages. Sorry for the question.
Alan
hi shane i want to color the dates with a specific color on which a event is added.
like coloring the cells
can u help me with that.
where is CalendarFx.js?
Hi Gill,
I’m not sure what it is you are trying to achieve. Do you want to change the color that is used to highlight the cell? If so, you should look at the Calendar.css, and the .dijitCalendarSelectedDate class, which you should override.
As for CalendarFx.js, it is in dojox/widget/CalendarFx.js
Shane
Hi Shane
i have a grid associated with calendar.in the grid i have events regarding specific dates of month.now there are 3 categories of event like high priority,low ,medium and subsequent colors for them…….for example if i have a event on 16th day of a month and its high priority(in grid) i want to color that date red……………….like the highlighter………………….so my calendars dates will be colored if there is a event for that date in my grid
Hi Gill,
You can do this by overriding the getClassForDate function on the Calendar.
Eg
var cal = new dojo.widget.Calendar({getClassForDate: function(date){
if (date.getMonth() < 6){
return “classOne”;
} else {
return “classTwo”;
}
});
ok i gt the point … i need to override the getClassForDate() method and return css style for that date ……………..classone and classtwo is styles rght……my code is this
<link rel=”StyleSheet” type=”text/css” href=”/js/dojo/resources/dojo.css”>
<link rel=”StyleSheet” type=”text/css” href=”/js/dijit/themes/tundra/tundra.css”>
var djConfig = {
baseScriptUri : “/js/dojo/”,
parseOnLoad : true,
extraLocale: [‘en-us’, ‘zh-cn’]
};
<script type=”text/javascript” src=”/js/dojo/dojo.js”
djConfig=”isDebug:true, parseOnLoad: true”>
dojo.require(“dojo.parser”);
dojo.require(“dijit._Calendar”);
function myHandler(id,newValue){
console.debug(“onChange for id = ” + id + “, value: ” + newValue);
}
can u help me out exactly where i can override it and pass those colors(am new at dojo)
Thanks
++
disable weekends
hey thanks i was able to do that….but wat is the format of css(classone,classtwo) i need to send to color that whole cell block with different color?
Hi Gill,
It depends on what you’re trying to do. Try something like:
.classOne {
font-weight: bold;
background-color: red;
}
Thanks Shane ……..i was able to do that………….i made change to _calendar.js itself…………but is there way i can do the same in my jsp without editing _calendar.js…………..overriding getClassForDate: function in jsp with my calendar id…………i dnt knw the way or syntax to use……………and one more thing……in ext-js i used…..ext.json.encode …..to encode my json string which is coming from server is there any such thing present in dojo 1.1.1
Hi Gill,
Overriding the code is extremely easy. If you are declaring the Calendar in JavaScript, see comment #20 above where I showed you how to do it.
If you are declaring the Calendar in HTML, use this code:
<div dojoType=”dojox.widget.Calendar”>
<script type=”dojo/method” event=”getClassForDate” args=”date”>
if (date.getMonth() < 6){
return āclassOneā;
} else {
return āclassTwoā;
}
</script>
</div>
Hello Shane,
I am using Dojox Calendar 1.3 and have same kind of requirement as above where i want to color specific dates that has events attached to it. is there any way to change the color of the dates if i know the dates that has events. I mean what class can i apply to it…if i create a class like .classOne mentioned above, it doesn’t get applied to my Caledar dates . If I use .classOne .dijitCalendarDateLabel instead, all my dates are colored.
how do i access a particular date?
please help.
can u please send me the code… I too had a similar requirement … Thanks in advance
Hi Gill,
Also, to encode Json, simply use
var myObject = {foo: “bar”};
var myJson = dojo.toJson(myObject);
See the documentation here – http://docs.dojocampus.org/dojo/toJson
Thanks shane…………is there a way that the default _calendar only show days of that month only instead of showing days of next month also ……..under it in unhiglighted mode,
Hi Gill,
No, there is not
Shane
Is there a test html page that displays these calendars?
I tried to open the CalendarYear.html from /dojo/dojox/widget/Calendar/CalendarYear.html from my server, I got a blank page. I am sure I am missing something, but not sure what?
Thanks
In Dojo 1.3, the calendar widget was rewritten, and the test files were changed. You can still see the standard calendar at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_Calendar.html , and the use of alternate views can be seen at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_CalendarViews.html
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 cleraly visible other than the current selected month/year.
Please let me know how this can be fixed.
Hi all,
I used this cool widget to make possible the selection of the year (dojox.widget.YearlyCalendar), I am able to select the year but I am not able to highlight the year selected. Does anyone succeed on this?
Thanks
gigi
My problem is that dojox.calendar.datepicker is not rendering in ie here is the code
dojo.addOnLoad(
function() {
// create a new instance of a Calendar
var calendar = new dojox.widget.Calendar3Pane({
onChange: function(val){
// when the value changes, hide the popup
// and set a value to our input
dijit.popup.close(calendar);
console.log(val, typeof val);
this._pushChangeTo.value = dojo.date.locale.format(val, {datePattern:”dd.MM.yyyy”, selector: “date”});
},
destroy: function(){
// avoid leaving a ref in object for IE?
delete this._pushChangeTo;
this.inherited(arguments);
}
});
dojo.extend(dojo.NodeList, {
// the guts of the “plugin”
addPicker: function(args){
this.forEach(function(n){
// add an image after the input we’re targeting for clickage
/*var img = dojo.doc.createElement(‘img’);
dojo.attr(img, {
// change this to something better:
//src:”http://archive.dojotoolkit.org/nightly/checkout/demos/resources/silk/icons/date_magnify.png”,
src:”images/imgCalendar1.gif”,
alt:”calendar”,
style:{ cursor:”pointer” }
})
//dojo.place(img, n, “after”);
dojo.connect(img, “onclick”, function(e){
// tell popup which node to send onChange value to
calendar._pushChangeTo = n;
// and open the popup below the targeted input
dijit.popup.open({
popup: calendar,
around: n
});
})*/
dojo.create(“img”, {
src:”images/imgCalendar1.gif”,
alt:”celendar”,
style:{ cursor:”pointer” },
onclick: function(e){
calendar._pushChangeTo = n;
dijit.popup.open({
popup: calendar,
around: n
});
}
}, n, “after”);
});
return this; // dojo.NodeList
}
}) ;
dojo.query(“#foo”).addPicker();
i have created a text box with id foo but it is working in mozilla but not in ie. Requesting urgent help
Hi Debashish,
I have been trying to use the calender feature. with an image which when cicked pop’s the calender i checked ur code but i am confused. Need some urgent help with codes. and its implementation
Hi Sunny,
Did you get the code and implementation, If yes please reply to the post even I require it. Thanks in advance.
Tim.
I am trying to get this to put a little text near the date describing an event at that date…
So what i am trying to setup is to set some date(ranges) and specify a tekst describing what it has to do… Then the calendar needs to add those events with a colored background (response 27 can help with that i think) and add some text in the same cell as where the date number is (below it)… Is this possible? Found this article: http://ekrantz.com/index.php/2007/03/01/creating-a-dojo-calendar.html
But that is not working with the current Dojo calender versions anymore…
The calendar does not support adding extra text to a cell. However, you can specify how it is highlighted using CSS
Hi Shane, I’ve used the code in dojocampus.org site.
dojo.addOnLoad(function(){
var calendar = new dojox.widget.Calendar({
onValueSelected: function(val){
dijit.popup.close(calendar);
console.log(val, typeof val);
this._pushChangeTo.value = dojo.date.locale.format(val, {selector: “date”, datePattern:”MM-dd-yyyy”});
},
destroy: function(){
delete this._pushChangeTo;
this.inherited(arguments);
},
});
dojo.extend(dojo.NodeList, {
addPicker: function(args) {
this.forEach(function(n){
dojo.create(“img”, {
src:”images/calendar.gif”,
alt:”Calendar”,
style:{cursor:”pointer”, float:”left”, margin:”0 0 0 10px”},
onclick: function(e){
calendar._pushChangeTo = n;
dijit.popup.open({popup: calendar, around: n});
}
}, n, “after”);
});
return this;
}
});
dojo.query(“#recDate”).addPicker();
dojo.query(“#startDateVal”).addPicker();
dojo.query(“#endDateVal”).addPicker();
});
My question is, how do I set the selected Calendar to the corresponding textbox or current calendar?
1st : When I clicked the calendar icon on(#recDate) and selected May 1, 2010 and go to the calendar icon on (#startDateVal) the default selected calendar is on May 1, 2010. I tried selecting June 15, 2010 on (#startDateVal) and it appears on the textbox.
2nd: When I come back to click calendar icon on(#recDate) with the value on the textbox as May 1, 2010, the calendar shows up with June 15, 2010 selected.
Can I manipulate the value of the popup calendar while using this code?
I copied the code in this url:
http://dojocampus.org/content/2009/01/06/a-popup-datepicker/
Thanks,
Paul
Small question, is there any way to get the node of the date clicked? I want to open a tooltip on that spot but all I get from onValueSelected is the date itself.
You could try
dojo.connect(myCalendarWidget.domNode, "onclick", function(event){
if(dojo.hasClass(event.target, "dijitCalendarDateTemplate"
|| dojo.hasClass(event.target.parentNode, "dijitCalendarDateTemplate"))) {
// Do something
}
});
I’ve copied HTML and Calendar.css code and modified links to all Dojo/Dijit/Dojox (last version from Google api)
The result is nothing…
May be not compatible to last version???
Hi,
I am new to dojo and I have an issue with calendar popup. We are using dojo with JSF.
Issue is like.. we have a datefield and when I click in the datefield the calendar pops up. If without selecting any date if I click somewhere else i.e. clicking in someother fields, the calendar needs to be closed but its not happening and if I select a date in the calendar then the popup closes. The code is like this
function showCalendar(“form1:startDateId”) {
dojo.extend(dijit.Calendar, {
isDisabledDate: function(/*Date*/ dateObject, /*String?*/ locale){
return dojo.date.locale.isWeekend(dateObject);
}
});
var cal = new dijit.Calendar({});
var nodeOn = dojo.byId(datefield);
dijit.popup.open({parent: nodeOn, popup: cal, around: nodeOn, orient: {BL:’TL’, TL:’BL’},
onCancel:function(){
dijit.popup.close(cal);
}
});
dojo.connect(cal, ‘onValueSelected’,
function() {
dojo.byId(datefield).value = dojo.date.locale.format
(cal.value,
{ selector: “date”, formatLength: “short”, datePattern: “dd/MM/yyyy”
}
);
dijit.popup.close(cal);
}
);
any help would be appreciated.
Thanks
sred
Hi All,
I need codes for the date picker using dojo. i dont want to use dojox.form.DateTextBox as just a img button when clicked renders me the calender and the date when selected is fed into a plain text box.
need urgent help.
All code in Dojo is open source. Just download Dojo from dojotoolkit.org. The standard Dijit date picker is at dijit/Calendar.js, and the one in this blog post is at dojox/widget/Calendar.js
Hi Shane,
Thanx for updating me on that but what i need is a calender funcion using dojo that can be called by a button to store the value in a plain dojo text box.
more interactive look up .
I just want to say thanks for this widget.
From Dojo 1.5, I think the month view still having bug
Now donwloading the nightly build of it.
Thanks!
Your calendar widget looks compact in a better looking way than dojox/calendar or dijit/calendar. Unfortunately I do not see how I can have multiple dates selected or highlighted. Or I would like to add color to indicate that these dates can be used. Is there a way to do that?
Clement
Can we do a whole week select on this calendar by selecting a date.
I find the jquery datepicker even more compact with looking sleek. I liked it better but can dojo calendar be made to look same as jquery datepicker?
Admiring the hard work you put into your site
and detailed information you offer. It’s nice to come across a
blog every once in a while that isn’t the same unwanted rehashed material.
Great read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.