SOS

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

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

62 Responses to “Sexy new Calendar widget for Dojo”

  1. [...] Posts Sexy new Calendar widget for DojoIntroducing the new Dojo Image WidgetsVery powerful Javascript compressor called Packer [...]

  2. [...] Posts Sexy new Calendar widget for DojoDojoCampus – The best Dojo learning resourceWriting a Django Template Widget With Dojo Data [...]

    • Wolfgang said

      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.

  3. 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.? .

  4. 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

  5. zayar said

    Hi Shane O’Sullivan,

    How can I add events to the date?

  6. 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.

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

  8. 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

  9. Apsy said

    It would be cool to have a “change month” event. “onChangeMonth” would be great :)

    Same for “year” etc…

  10. 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

  11. 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.

  12. 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.

  13. 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

  14. Hi Alan,

    You can use the dojox.form.DateTextBox

    SHane

  15. 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

  16. 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.

  17. gill said

    where is CalendarFx.js?

  18. 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

  19. 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

  20. 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”;
    }

    });

  21. 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

  22. gill said

    ++

    disable weekends

  23. gill said

  24. 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?

  25. Hi Gill,

    It depends on what you’re trying to do. Try something like:

    .classOne {
    font-weight: bold;
    background-color: red;
    }

  26. 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

  27. 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.

  28. 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

  29. 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,

  30. Hi Gill,

    No, there is not

    Shane

  31. Mouli said

    Is there a test html page that displays these calendars?

  32. 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

  33. 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

  34. 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.

  35. 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

  36. 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.

  37. 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…

  38. The calendar does not support adding extra text to a cell. However, you can specify how it is highlighted using CSS

  39. 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

  40. 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.

    • You could try

      dojo.connect(myCalendarWidget.domNode, "onclick", function(event){
      if(dojo.hasClass(event.target, "dijitCalendarDateTemplate"
      || dojo.hasClass(event.target.parentNode, "dijitCalendarDateTemplate"))) {
      // Do something
      }
      });

  41. 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???

  42. 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

  43. 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.

    • 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 .

  44. 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!

  45. export firefox bookmarks…

    [...]Sexy new Calendar widget for Dojo « SOS[...]…

  46. psoriasis said

    psoriasis…

    [...]Sexy new Calendar widget for Dojo « SOS[...]…

  47. (Ultrabook Notebook|Harga Notebook)…

    [...]Sexy new Calendar widget for Dojo « SOS[...]…

  48. PKV Versicherungen…

    [...]Sexy new Calendar widget for Dojo « SOS[...]…

  49. [...] 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 … [...]

  50. 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

  51. Shavez said

    Can we do a whole week select on this calendar by selecting a date.

  52. 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?

  53. console id said

    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.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 535 other followers

%d bloggers like this: