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
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
Dojo 1.1 is cooked and ready to eat! « SOS said
[...] Posts Sexy new Calendar widget for DojoIntroducing the new Dojo Image WidgetsVery powerful Javascript compressor called Packer [...]
DojoX Calendar widget committed « SOS said
[...] Posts Sexy new Calendar widget for DojoDojoCampus – The best Dojo learning resourceWriting a Django Template Widget With Dojo Data [...]
Larry said
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
Gopinath said
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.? .
Shane O'Sullivan said
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
zayar said
Hi Shane O’Sullivan,
How can I add events to the date?
Shane O'Sullivan said
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.
zayar said
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
Shane O'Sullivan said
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
Apsy said
It would be cool to have a “change month” event. “onChangeMonth” would be great
Same for “year” etc…
Shane O'Sullivan said
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
James Marca said
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.
Shane O'Sullivan said
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.
Alan said
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
Shane O'Sullivan said
Hi Alan,
You can use the dojox.form.DateTextBox
SHane
Alan said
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
gill said
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.
gill said
where is CalendarFx.js?
Shane O'Sullivan said
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
gill said
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
Shane O'Sullivan said
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”;
}
});
gill said
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
gill said
++
disable weekends
gill said
gill said
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?
Shane O'Sullivan said
Hi Gill,
It depends on what you’re trying to do. Try something like:
.classOne {
font-weight: bold;
background-color: red;
}
gill said
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
Shane O'Sullivan said
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>
vidya said
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.
SIVA said
can u please send me the code… I too had a similar requirement … Thanks in advance
Shane O'Sullivan said
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
gill said
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,
Shane O'Sullivan said
Hi Gill,
No, there is not
Shane
Mouli said
Is there a test html page that displays these calendars?
Mouli said
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
Shane O'Sullivan said
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
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 cleraly visible other than the current selected month/year.
Please let me know how this can be fixed.
Gigi said
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
Debashis Sinha said
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
sunny said
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
ram said
Hi Sunny,
Did you get the code and implementation, If yes please reply to the post even I require it. Thanks in advance.
Tim.
Apen-nootjes said
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…
Shane O'Sullivan said
The calendar does not support adding extra text to a cell. However, you can specify how it is highlighted using CSS
Paul Serrano said
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
Rob said
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.
Shane O'Sullivan said
You could try
dojo.connect(myCalendarWidget.domNode, "onclick", function(event){
if(dojo.hasClass(event.target, "dijitCalendarDateTemplate"
|| dojo.hasClass(event.target.parentNode, "dijitCalendarDateTemplate"))) {
// Do something
}
});
toledano said
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???
sred said
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
sunny said
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.
Shane O'Sullivan said
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
sunny said
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 .
Eko SW said
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!
export firefox bookmarks said
export firefox bookmarks…
[...]Sexy new Calendar widget for Dojo « SOS[...]…
psoriasis said
psoriasis…
[...]Sexy new Calendar widget for Dojo « SOS[...]…
(Ultrabook Notebook|Harga Notebook) said
(Ultrabook Notebook|Harga Notebook)…
[...]Sexy new Calendar widget for Dojo « SOS[...]…
PKV Versicherungen said
PKV Versicherungen…
[...]Sexy new Calendar widget for Dojo « SOS[...]…
Dijit calendar | Keizunet said
[...] Sexy new Calendar widget for Dojo « SOSMar 24, 2008 … All the Date-related heavy lifting is done with dijit._Calendar, the existing Dojo calendar widget. This also handles the majority of the … [...]