Mar 012007
 

UPDATE: (Nov. 19, 2009) This widget only works for Dojo 0.4x.

At times I have had the urge to update the code and add extra features, but I just don’t have the time right now.

About this tutorial

After using Dojo for some time and looking for a calendar widget I gave up and started coding one myself. I had several goals with this widget: Using any back-end database for the entries, time zone changes, localized (internationalization i18n) and being able to drag entries to other dates.

This tutorial gives you all the code and files to get this calendar up and running on your server.

Fig. 1

Prerequisites

This tutorial is written for JavaScript programmers whose skills are at a medium to expert level. You should also have an intermediate knowledge of Dojo Toolkit HTML widgets.

The code I show here is only tested on:

Servers: Windows and Linux. The code here runs on a Linux server.
Clients: I’ve tested Firefox 2.x on Windows and Linux and IE 6 and 7 on Windows.

Please don’t bug me if the code won’t work on anything else. I know there are many Mac users out there, but I don’t have one. If you will buy me one I’ll be happy to test on that platform as well. As for browsers, the two browsers mentioned above is what 99% of my clients/friends use so I stick with them. If it crashes your server/client, don’t blame me. You download and try this code on your own terms/risks. If you have any suggestions on to how make it work for any other browsers, please feel free to leave a comment.

I had a few goals that I wanted to accomplish:

  • Using standard Dojo Widget authoring techniques.
  • The calendar entries could reside on ANY database backend.
  • Time zone sensitive
  • Internationalization (i18n)

Getting started

First you download the files needed for the Calendar to work. These files are zipped and should be extracted on your server.

  • Dojo Toolkit – 0.4.1 or later.
  • [download#1#nohits] – This is the folder with all the code for the Calendar widget. Should be extracted next/parallel to the dojo folder.
  • [download#2#nohits] – The HTML file. If you don’t want to code yourself. Located in a folder called calendar.

Then in normal Dojo widget way we add the JavaScript and the HTML to show the widget.

In the header of our html page we add:
<script type="text/javascript" src="../dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("mywidgets.widget.Calendar");

And then in our body we add:
<div style="width:800px; height:400px; background-color:#cccccc; overflow:auto;">
<div id="dojoCalendar" dojoType="mywidgets:calendar"></div>
</div>

The outer div here is only for sizing the actual Calendar. It also adds a background color, so you can choose any color you want for your site.

Save the file as index.html on your server in a folder called “calendar”. The calendar folder should be next/parallel to the “dojo” and the “mywidgets” folder.
Browse to the calendar folder and you should see something similar to Fig 1 above. If your machine is using another Regional and Language option than English you will see all month- and day names in your language. This is done by the i18n (internationalization) Dojo code build into the Calendar widget.

Show some Calendar entries

I wanted this widget to be totally separated from all back-end code (the actual calendar entries) but I still (obviously) needed a way of showing the calendar entries in the calendar. We do this by creating an object (JSON) that I pass in to the widget. This object looks like this:


entries: {
"id1": (String - Unique identifier of event) {
starttime: "2006-12-30T08:05:00-06:00", (String - Formatted according to RFC 3339. See dojo.date.serialize)
endtime: "2006-12-30T10:05:00-06:00", (String - Formatted according to RFC 3339. See dojo.date.serialize)
allday: false, (Boolean - Is event an all day event)
repeated: false, (
Boolean - Is event repeated)
title: "Title 1", (String - Event title)
url: "http://yourdomain.com/events/thisevent", (String - Event URL (if any))
body: "This is the body", (String - Event body text (if any))
attributes: {Location:"Location 1",Chair:"John Doe"}, (Object - All attributes you want in name value pairs)
type: ["meeting","reminder"] (Array - Event/Icon types you want for this event. See "eventtypes")
}
}

This is how the object needs to be structured if you use your own back-end database. So how do we pass this object into the Calendar widget?
Add the following code at the top of our HTML file, right after: dojo.require("mywidgets.widget.Calendar");.

dojo.addOnLoad(init);
var oCalendar;


function init(){
oCalendar = dojo.widget.byId("dojoCalendar");
oCalendar.onValueChanged = widgetValueChanged;
widgetValueChanged(new Date());
}


function widgetValueChanged(dateObj){

}

The code dojo.addOnLoad(init); is Dojo’s way of telling the browser that when everything is loaded on the page call this script. So we call the function init. In this function we set the global variable oCalendar to the widget object “dojoCalendar”.

We also set the onValueChanged function to be called by a function called “widgetValueChanged”. We need to pass a date into that function. The Calendar widget code passes that date into this function when we change date in the Calendar, by moving to another month for instance.

The function “widgetValueChanged” is where we would call script to query our database for calendar entries for this particular month. I will give examples on doing this in part 2 of this posting. The query should always return all entries for a whole month.

I have created some simple code here that create 3 entries. On the 1st, 15th and the 28th for any month you select.

function widgetValueChanged(dateObj){
dojo.require("dojo.date.serialize");
var d1s = new Date(dateObj);
d1s.setDate(1);
d1s.setHours(14,0,0,0);
var d1e = new Date(dateObj);
d1e.setDate(1);
d1e.setHours(14,30,0,0);
var d15s = new Date(dateObj);
d15s.setDate(15);
var d15e = new Date(dateObj);
d15e.setDate(15);
var d28s = new Date(dateObj);
d28s.setDate(28);
d28s.setHours(16,40,0,0);
var d28e = new Date(dateObj);
d28e.setDate(28);
d28e.setHours(18,30,0,0);
var entries = {
"id1": {
starttime: dojo.date.toRfc3339(d1s),
endtime: dojo.date.toRfc3339(d1e),
allday: false,
repeated: false,
title: "Title 1",
url: "",
body: "This is the body of entry with id: id1 and title: Title 1",
attributes: {
Location: "My Galactic Headquarters",
Chair: "John Doe"
},
type: ["meeting"]
},
"id2": {
starttime: dojo.date.toRfc3339(d15s),
endtime: dojo.date.toRfc3339(d15e),
allday: true,
repeated: false,
title: "Title 2",
url: "",
body: "This is the body of entry with id: id2 and title: Title 2",
attributes: {
Location: "Somewhere"
},
type: ["appointment","super"]
},
"id3": {
starttime: dojo.date.toRfc3339(d28s),
endtime: dojo.date.toRfc3339(d28e),
allday: false,
repeated: false,
title: "Title 3",
url: "",
body: "This is the body of entry with id: id3 and title: Title 3",
attributes: "",
type: ["reminder"]
}
}
oCalendar.setCalendarEntries(entries);
}

All we do here is set 3 dates and time for start- and end-time. The first line adds the Dojo functionality to create RFC 3339 strings out of a date. The last line of the code pass the object in to the Calendar widget. As I mentioned earlier I will give you code examples of passing real entries into the Calendar in part 2 of this posting.

Fig. 2

If you go to your HTML page now you will see the 3 entries on any month you go to. Hover over the title and you will see more data about the entry including icons, start- and end time (not the 15th, it is an all-day event), and any other attributes you passed in. This is done by a Dojo widget called Tooltip that I added into the code. See Fig. 2

Time zones

One of the goals I wanted to achieve with this calendar was that it would handle timezones. The nice feature with Dojo dates are that they are timezone sensitive. That means that when you pass in a date in the Rfc3339 format (2007-03-11T10:05:00-06:00) that includes a timezone value it will convert the entry into the timezone your computer is set to. This is great most of the time but if you are like me and travel over timezones all the time I want to be able to show the entry times in the zone I’m in at the moment.

I didn’t add all the timezones and their offset from UTC into the Calendar widget code itself for a couple of reasons. First, there are many timezone code examples out there and you might have one that is better than mine. Second, you might not want this feature and instead always show the times in the end-user’s timezone. Timezones are a strange chapter since many countries actually change dates from year to year when daylight savings time go in- and out of effect. Just look at what Australia and USA have done just recently. If you see that any location is wrong or missing in my Timezones widget please leave a comment to this posting and I will change it as soon as I can.

As part of the code you have downloaded, inside the “mywidgets” folder is a widget called Timezones. This widget holds all timezones that I had on file. It is updated with the latest USA daylight savings dates. Below you can see the first 5 locations in that file. Feel free to explore the Timezones widget.

mywidgets.widget.timezones = [
{name:"International Date Line West", sn:"Dateline", offset:-720, dst:0, standard:0},
{name:"Midway Island, Samoa", sn:"Samoa", offset:-660, dst:0, standard:0},
{name:"Hawaii", sn:"Hawaiian", offset:-600, dst:0, standard:0},
{name:"Alaska", sn:"Alaskan", offset:-540, dst:"3,-1,1", standard:"10,-1,1"},
{name:"Pacific Time (US & Canada); Tijuana", sn:"Pacific", offset:-480, dst:"3,-1,1", standard:"10,-1,1"}
]

If you don’t use my Timezone widget but your own code you need to pass in the different locations this way. As you can see we have an array of objects. Each location is an object with with name value pairs. They are:

  • name: The name of your timezone location. Usually all the locations this zone apply to.
  • sn: Short name of location
  • offset: The offset in minutes from UTC
  • dst: The date daylight savings go into effect. (Month, Number of day (-1 indicate last), Day (starting with Sunday as 1)). If no DST specify a 0 (zero)
  • standard: The date that standard time go into effect. Same attributes as dst.

To pass this into the Calendar widget we have to add some code to our HTML. Don’t worry it’s only a couple of lines.
After our dojo.require("mywidgets.widget.Calendar"); we add another line that says:
dojo.require("mywidgets.widget.Timezones");

And in our “init” function we add:
oCalendar.setTimeZones(mywidgets.widget.timezones);

The “init” function will now look like this, with the new line in bold:

function init(){
oCalendar = dojo.widget.byId("dojoCalendar");
oCalendar.setTimeZones(mywidgets.widget.timezones);
oCalendar.onValueChanged = widgetValueChanged;
widgetValueChanged(new Date());
}

What did we add? If you go to your HTML page now and refresh you will see a new icon at the top of the Calendar that looks like a clock. Click on it and you will see a modal floating window with all timezone locations that are in the Timezone widget. See Fig. 3.

Fig. 3

The selected time zone you see is “Default” which means you don’t have any time zone selected and all entry times are in your computer’s time. Select another time zone and you will see that the modal floating window automatically closes and all entry times are reflected by the new time zone selected. If you select a time zone way before or after yours you will see that the entries even change date they are on. If you select a time zone that differs not just by hours, but also by minutes, like Kathmandu you will see that the entry times are reflected as well. This does not reflect all-day events, they should never be moved.

More on Time zones

This is nice but when you change a timezone we might want this change to “stick” so when we come back to the Calendar our selected time zone will still be selected. So we need to save a cookie with the selected time zone. Time to add 2 lines of code to the “init” function again.

function init(){
oCalendar = dojo.widget.byId("dojoCalendar");
oCalendar.setTimeZones(mywidgets.widget.timezones);
oCalendar.selectedtimezone = dojo.io.cookie.getObjectCookie("DCTZ");
oCalendar.onSetTimeZone = widgetTimeZoneChanged;

oCalendar.onValueChanged = widgetValueChanged;
widgetValueChanged(new Date());
}

We also add another function to our code, “widgetValueChanged”.

function widgetTimeZoneChanged(){
if(oCalendar.selectedtimezone == ""){
dojo.io.cookie.deleteCookie("DCTZ");
}else{
dojo.io.cookie.setObjectCookie("DCTZ",oCalendar.selectedtimezone,3650);
}
}

The dojo.io.cookie code above is part of Dojo and as you can see they have built in functions for passing objects to create and/or get cookies. Now we can select a time zone in our Calendar, close our browser windows, come back and the same time zone is still selected.

Changing date for a calendar entry

What if I want to move an entry to another date? Well, there is code for that built in as well. Add 2 more lines of code to our “init” function.

function init(){
oCalendar = dojo.widget.byId("dojoCalendar");
oCalendar.setTimeZones(mywidgets.widget.timezones);
oCalendar.selectedtimezone = dojo.io.cookie.getObjectCookie("DCTZ");
oCalendar.onSetTimeZone = widgetTimeZoneChanged;
oCalendar.changeEventTimes = true;
oCalendar.onEventChanged = widgetEventChanged;

oCalendar.onValueChanged = widgetValueChanged;
widgetValueChanged(new Date());
}

Add another function called “widgetEventChanged”.

function widgetEventChanged(eventId,eventObject){
var sReturn = "id " + eventId + "=n";
for(var i in eventObject){
if(typeof(eventObject[i]) != "object"){
sReturn += i + " = " + eventObject[i] + "n";
}else{
oChildObject = eventObject[i];
var sChildReturn = "";
var iNum = 0;
for(var j in oChildObject){
if(iNum > 0){
sChildReturn += ", ";
}
sChildReturn += j + ": " + oChildObject[j];
iNum++;
}
sReturn += i + " = " + sChildReturn + "n";
}
}
alert(sReturn);
oCalendar.refreshScreen();
}

Now browse to our HTML page and refresh. If you hover over the time of an event you now see that you can drag and drop the event to another day. When you drag an entry to another day you must be sure to see the line before you drop it. (See Fig. 4) After you dropped it a modal floating window will appear with the new date shown at the top and a Time picker for you to select a new start- and end time. (See Fig. 5)

Fig. 4

Fig. 5

Click OK in the modal “Change” floating window to accept your times. Now you will see an alert with all the meta data of the entry with it’s new date and times. After you click OK in the alert the entry goes back to it’s date and time. This is obviously not what we want to happen but a good indication that we get what we want back. The alert comes from the “widgetEventChanged” function we just added to our code. We will change this function in part 2 of this tutorial to save to our back-end database instead.

Adding a new Calendar entry

I also wanted to add the capability to add a new entry. Let’s add a couple of lines to our “init” function again.

function init(){
oCalendar = dojo.widget.byId("dojoCalendar");
oCalendar.setTimeZones(mywidgets.widget.timezones);
oCalendar.selectedtimezone = dojo.io.cookie.getObjectCookie("DCTZ");
oCalendar.onSetTimeZone = widgetTimeZoneChanged;
oCalendar.changeEventTimes = true;
oCalendar.onEventChanged = widgetEventChanged;
oCalendar.setAbleToCreateNew(true);
oCalendar.onNewEntry = widgetNewEntry;

oCalendar.onValueChanged = widgetValueChanged;
widgetValueChanged(new Date());
}

Add a new function called “widgetNewEntry”.

function widgetNewEntry(eventObject){
var sReturn = "";
for(var i in eventObject){
if(typeof(eventObject[i]) != "object"){
sReturn += i + " = " + eventObject[i] + "n";
}else{
oChildObject = eventObject[i];
var sChildReturn = "";
var iNum = 0;
for(var j in oChildObject){
if(iNum > 0){
sChildReturn += ", ";
}
sChildReturn += j + ": " + oChildObject[j];
iNum++;
}
sReturn += i + " = " + sChildReturn + "n";
}
}
alert(sReturn);
//Call script to add to back-end db
oCalendar.refreshScreen();
}

Now go to our HTML page again and refresh. You now see another icon appear at the top of our Calendar. Click on the icon and we will see a new modal window for creating a New Entry. (See Fig. 6)

Fig. 6

Fill in the “Subject” and click OK. We get an alert with the object values we wrote in the fields.
As you can see in our code, the “widgetNewEntry” functions is very much like the “widgetEventChanged” function we added earlier. It simply alerts us with the object values it received. The new entry never get added to our calendar. The “oCalendar.refreshScreen()” call at the end of both the “widgetEventChanged” and the “widgetNewEntry” functions causes the Calendar to widget make a new call to our “widgetValueChanged” function. That function actually creates the same 3 entries every time so we never get our new entries. We need to update the back-end database for them to appear. Come back for part 2 of this tutorial.

In this first version of this Calendar widget I have made life simple by not being able to create multi-day or repeated entries. When I get some time and/or if somebody will help me with some code feel free to leave a comment/response below.

What else can we do

We can go back and forward one month, week or day by clicking on the arrows in the upper left- or right corners. If we click on the month name at the top of our Calendar we get a drop-down with all the months, so that we can quickly go to the month we want. (See Fig. 7) Clicking on the year will give us a drop-down with the previous two and the next ten years. If you want to go back to today’s date you can always click that icon.

Fig. 7

We can also change the default Calendar type. Add an attribute to the HTML of the widget with your preference. Default is “month”, but you can select “week” or “day” instead.

<div id="dojoCalendar" dojoType="mywidgets:calendar" calendarType="week"></div>

Closing

I’m working on part 2 of this tutorial, where I will give code examples of how to update the back-end database using Ajax. Check back soon. I know there are many of you out there who would want to see other features in this Calendar widget. I would love to hear them. Leave a comment below.

This was my first attempt of creating a Dojo widget, and a tutorial for that matter, so please be gentle with your comments. I would really like to hear your input on the layout and/or code, whichever is your game.

  108 Responses to “Creating a Dojo Calendar”

  1. Thank you for a great tutorial (I think you did a great job considering this is your first). I’ll will test this code and get back with you.

  2. The calendar is very powerful, i want to make one long ago, but now, i can get the source code! thanks!
    Also, this tutorial is very good, it must be cost you a lot of time!

  3. Iven,

    You are welcome. Yes it did take a long time to write the tutorial and I’m working on part 2 of it.

  4. Hi Victor,
    The Calendar is superb. Thankz!

    One thing I would like to know is… below Fig 5, you have told – “We will change this function in part 2 of this tutorial to save to our back-end database instead.” What is this part 2 and when will this be posted?

    Regards,
    Rakesh Anchan.

  5. Rakesh: I’m working on part 2 of this tutorial. I’m really busy with other for my day time (and night time) work right now, but I hope it will be in the next few weeks.

  6. Hi Victor,

    Thank you for your responce.
    I would be eagerly waiting for Part 2 of your tutorial/documentation.

    Thanks and Ragards,
    Rakesh Anchan.

  7. Great job. I’m hooking it into my backend. I’ll be curious what the differences and similarities are between what I come up with as a solution and your part 2. Anyhow, just wanted to say great job.

  8. Hey this is terrific stuff Victor. I’ve been toying with putting the calendar in a floatingPane itself, but haven’t been able to properly adjust the dialog’s zIndex. They show up behind my pane…

    Thoughts?

  9. Will part 2 contain the i18n portions of the code? I’m looking into dojo widget i18n and have noticed that there isn’t much information out there about how resources are packaged. Am looking forward to seeing how it’s done.

  10. And, rocking job.

  11. Yoo: I’m curious about that too.

    Andy: Could be so many different things. It’s Dojo setting the zIndex values so it’s not in my code at all.

    Rhys: Most of the i18n code that will be part of this calendar is in there already. I will add some new code later for a few hard-code variables still in there. Everything I learn about i18n and Dojo I’ve found on Google.

  12. Very nice tutorial, and calendar as well. Thank you for the post. Off the top of your head, do you think that it would be possible to extend this to display two months at once? I have requirements of a calendar based of accounting periods (13 in a year). So, I was thinking that I could have two months displayed at once, with the weeks in the period highlighted or something (if the period happens to cross months). Anyway, not looking for any code to do it or anything, just your thoughts on whether it could be done without too
    much effort.

  13. I’m working on adding time screen, breaking day into 30 min time zones to display items used during the day. I’ll post a link to my solution when I finish.

  14. ps Great job.

  15. this is a good example of connecting to you database if you just don’t know how to make javascript talk to php

    bokehman.com/validate_email_with_the_xml_http_request_object

  16. This tutorial was definately helpful for me……. But i was searchin for something else. I would be greatful if anyone could jus send me the “TUTORIALS ON DRAGGIN AND DROPPIN OF WINDOWS USING DOJO”

    This is what i was searching for..

    Regards,
    Kalidas.V.D

  17. If the event is multi days,it just show in the first day

  18. roy –
    Yes, it is one of the updates I’m working on.

  19. Thanks for your reply,I am working on it to embed it to my system.One of my suggestion is there should have a one year view.And if one day view have time meter like google calendar will be more attactive.

  20. Hello,

    Thank you for this tutorial. After starting to write one of my own calendar using dojo and the memo example I found your site and this avoided me a lot of hours of work. I have integrated the way the calendar gets his entries with our system which generates a calendar in XML format and I want to share this code with you as it might be of help to others. The code and some short explanations can be found: here

    Len

  21. Hi,
    I regret I cannot get your calendar work on 0.9v. Did you already improved your code to work on it?

    would be very nice if you or anybody else can share it :D
    greetings,
    marco

  22. Hi,

    Thank you for this tutorial. Could you explain how migrate this code to dojo 1.0

    Ram Prasad.

  23. Ram Prasad,

    I’m working on getting my Dojo Calendar to work with Dojo 1.0.
    I should have it done in the next week or two.

  24. Viktor , I am assigned to migrate Dojo 0.4 to Dojo 1.0, I am new to Dojo. The calander is integrated with o.4, the changes you made.
    Now bugedup!!! need to even migrate calander from 0.4 to 1.0. Help me out.

    Thanking you.

  25. I am eagerly waiting for Dojo Calendar 1.0

    Thanks in advance
    Pankaj

  26. Its true its no longer working with the new Dojo 1.0
    Congratulaions on the calendar!

  27. Carlos,
    No it does not work with Dojo 1.0 yet. I’m working on it.

  28. I tried the above steps.
    I unzipped dojo-0.4.1p1-ajax.zip and placed mywidgets, calendar folder in parallel to dojo.

    I am getting javascript error as “could not load mywidgets.widget.Calendar”.

    Can you please help me out.

  29. Now i can see the calendar. The problem is with browser cache.
    Once i change the values in calendar i.e by changing time, how to read these new values so that i can update my database.

  30. Hi all,

    Sanjay, you need to know and understand how the calendar deals with entries. This tutorial explains it nicely. When you change time or test to add a new entry, the calendar deals with JSON objects. If you wants to retrieve data from the calendar (in order to update database) or inserts entries in the calendar, you should manipulate those JSON objetcs. I am currently working on a version of this calendar widget who persist datas in a MySQL database, i use ajax call to update my database and Zend Framework on the server-side, this works fairly well so far. When this application will be done, i’ll try to share my codes and explain it a little better.

    Vikktor, i would like to thank you for this GREAT work. Even if this don’t works with the new Dojo’s release, it still works fine with 0.4, and it’s all i want, especially all i need ^^ So, thank you again !

  31. HI ,

    Great compoenent. Works great with 0.4.3 too.
    Upgrade to dojo 1.+ seems to be breaking your code..

  32. Mk,
    Thank you for you kind words. I would like to see your work with Zend Framework when you have a working copy.

    Everybody,
    1.0 release will be here shortly.

  33. hi there,
    hi viktor,

    I’am also working with zend framework, also providing a german support forum under www.zfforum.de.

    If you need help in any way to bring the calendar up to working with dojo 1.0, let us (blogreader) know this, please. Perhaps we can help/support you.

    greetings,
    marco

  34. Mk,
    Thank you for the reply. I am stuck while setting date in calendar from database. Everything is working fine.
    Is there any format in which we need to input date in JSON object?
    Sanjay

  35. Hi All,

    It is working. I am breifing the steps so that it can be usefull.
    var edate=dojo.date.fromIso8601(endtime);
    calEntry.endtime = dojo.date.toRfc3339(edate);
    where endtime is the date in String form from my data base.
    and calEntry is the JSON object.
    The date string is in the following format
    2007-12-28T16:55:00-05:00

    Sanjay

  36. hi,
    any news about porting the cal?

  37. can i run this in dojo1.0.2

  38. r u upgrade this to 1.0+

  39. Hi,
    I am wondering if anyone knows what causes problems, that the Calendar widget does not work in current dojo release? Has anyone made a progress in sorting this out?

  40. I’m working on porting the Calendar to Dojo 1.0.x.
    I’m almost done.

  41. That’s great! Good luck with it and I am looking forward to have chance to check it.

  42. Thanks for your contribution Viktor. One more person eagerly waiting for the new dojo1.x release.

    Regards,
    Nitin

  43. Keep up the good work !

    I’m waiting for the 1.0.x update tho

  44. Viktor, excelent work !!!! i wonder if you need some help on porting the calendar to the dojo1x, or if you have any idea about when would be ready.
    Thanks a lot and CONGRATULATIONS !!!!

  45. lalala :)
    waiting patiently since July 24th, 2007 15:27 (comment#21) :)

    any news in the meanwhile?

    thx&greets, marco

  46. Would love to use this; had any progress for the Dojo 1.0 port?

    Also, is it screenreader accessible like Dojo itself?

  47. PLEASE is there anyone who can tell me where it is possible to download a version of dojo (0.41 ???) compatible with this calendar ? TIA !

  48. Newcomsas,
    Here you can download every possible version of Dojo.
    download.dojotoolkit.org/

  49. Viktor, I thank you for the answer but I had already downloaded 5 or 6 different versions of dojo from that site before posting here. None of them work !
    Could you please tell me WICH is the version of Dojo that is compatible with this script ? Could you even provide a direct link ? I am beginning to doub I will ever be able to use this calendar…

  50. Hello Viktor,
    Nice tuto ! well done , but i have this error via the browser
    FATAL exception raised: Could not load ‘dojo.date.common'; last tried ‘__package__.js’
    I don’t know what’s the real problem can?
    can you send me a link of the good dojo version or your dojo version used
    Thank you very much
    I hope to hear from you

  51. aymen,
    This calendar only works in Dojo version 0.4.x
    I’m working on the version for Dojo 1.1.x

  52. Viktor,

    What a wonderful tutorial on a much sought after feature. Come to #dojo on freenode and we’d be happy to answer any questions to help you port this to the 1.1 codebase. The DatePicker and Calendar widgets have been replaced by a new, simpler dijit._Calendar widget which should be more flexible and customizable.

    @Jon: Unfortunately, this widget was never made fully accessible — which is why it’s named with an “_” in the Dijit library. The only “supported” application is to use it as a popup assist for the DateTextBox form widget, which itself offers accessibility. Getting full accessibility for this widget is still on the TODO list.

  53. @peller,
    Thank you for your kind words. I work with Dojo on a daily basis and try to stay up to date with all the widgets that are updated and new. I’ll look you up on freenode.

  54. hello Viktor !!
    thank you again for your response. I really want to use your dojo calendar.
    Please tell us when you finish your update for the news version
    thank you again !!

  55. So do I

  56. Hi Viktor,

    really impressive tutorial – one that makes something usable come out when finished. How is the proceeding for porting it to dojo 1.x?
    I really would love to see this.

    path

  57. Very good tutorial. How can i have the calendar with previous dates are disabled?

  58. Hi , I have a problem in configuring the paths.
    Actually i am using it in a webpage.
    I’m getting errors like.

    1. failed loading ./dojo/../mywidgets/widget/Calendar.js with error: Error: Could not load ‘dojo.date.common'; last tried ‘./date/common.js’
    2. Could not load ‘mywidgets.widget.Calendar'; last tried ‘../mywidgets/widget/Calendar.js’

    please send me the solution.

  59. Hey Viktor,
    Awesome tutorial about how to create a DOJO calendar with a rich functionality. I’ve integrated it in one of my projects and it works great.
    Hope you get the port of 1.1 soon :).
    I tried to port it myself….but too many things have changed since 0.4.
    Thanks

  60. Hi Viktor,
    I can’t seem to download your starter files (my widgets & calendar file)
    Some help please? (:

  61. hey viktor. what’s going on?
    I’m waiting now for excactly one year that your announced Version for 0.9 is going to be released.

    did you stop developing or did you only changed your position to share it to us??

  62. Graffiti,
    Updated my server and the files had been misplaced. They are back now.

    Marco and everybody else,
    I’m still working on the update for the calendar to Dojo 1.x. I have a regular job that is taking up 50% my time and a family that is taking up the other 65% :).
    I know it’s been a long time since I said I would update the code, but you just have to be patient. For the prize you will be paying for the code (free), it’s still a bargain.

  63. Hi Viktor,
    thx for your reply.

    I just was uncertain if the delevopment is going on :)
    I’m planing to make use of your calendar for a free student projectmanagement platform so I’m tracking the progress

    regards,
    marco

  64. Hey Viktor:

    Let me know if you need some help finishing this up. I’ve done some updates on the 1.1 version of Dojox Floating Pane, and would love to use this for a project.

    Maybe we could tagteam whatever is left?

  65. Hi Viktor,
    I loved your calendar and these days i ported it over dojo 1.1, thanks to your polished code.
    Now some things are working: month/week/day view, changing dates and new events (I think). By now the dnd stuff doesn’t work, but i’m going to fix.
    If you are interested let me know and i will send you the updated code and calendar.html file.

  66. I get the error Could not load ‘mywidgets.widget.Calendar’; last tried ‘../mywidgets/widget/Calendar.js’.
    Please anybody help me .Thank a thousand.

  67. Michelle; Please do send code to Victor!
    Victor: Please receive code from Michelle?

  68. Well robert did u have any luck .. getting the changes from Michele?

  69. Hi Robert and Per, you can get the code here: dojo.vico10.com/calendar.zip.
    Viktor, if you want too…

  70. Hi, I’ve been struggling with calendar what I need is to be able to load the data upon a event say onchange of a select box. I do call the widgetValueChanged() on change of the select box And it does hit’s my server and get the data. But the data is appended to the calendar events. So I end up having duplicates events on a given day. I just want to clear existing data and load fresh data like I it would do in case of change day or month. Please help.

  71. Nice widget! What’s the license ?

  72. Great Tutorial Victor! I was wondering if you, or Mk have finished working on an integration between this calendar widget and a zend framework server side.

    I would be very interested in seeing that code even if it is not complete. I have a project where I would like to use this code and perhaps I could continue your work and share it back.

    Thanks again!

  73. Victor

    Could you email me the html file in calendar folder, so I don’t have to code this myself. I wasn’t able to get the simple above example to work and I couldn’t find html file at your 3rd link, which downloaded a Lotus Notes application, and I don’t have a domino server to open those .nsf files.

    Thanks
    Tyrone

  74. Thanks. The nice calendar.

  75. i cant find any MyWidget folder here to download.can anyone help me?/

  76. Michele – i dnldd your mywidget and have it working with json and a db.
    The dialogs arent working correctly for me – the new entry and the timezone throw errors and the calendar entry pops up by doesnt behave consistently.

    What version of dojo does this work with? I am on dojo 1.2.3 and working with this calendar is my first attempt at working with an ajax library so i am a newbie.

    thanks

  77. Michele; thanks for your help with providing code to work with for this widget. as a newbie it has help me alot. Today I installed the dojo 1.3 beta code and all of the dialogs started working correctly. I now just need to add the code to manage the data and i will have a nice working calendar widget.

    karen

  78. Hi Karen & Michele,
    What’s the dojo version worked for dojo.vico10.com/calendar.zip? The New Entry dialog and TimeZone dialog only display a title without any content. I have tried DOJO 1.3b3, 1.3b2, 1.3b1, 1.2.3 and 1.2, but no luck.

    Also, would you please help to share your work to make this calender work with JSON and database? My email cpplus @ 163.com, thanks!

  79. I have tried with Dojo 1.2. The New Entry and Timezone appears with only title. Please help me in solving the issues.

  80. Anyone solved the problem with the IE and the Could not load ‘mywidgets.widget.Calendar’; last tried ‘../mywidgets/widget/Calendar.js’. error?
    Greeting
    Mickey

  81. There is an error in the calendar.js.. with ie it does not works. any hint?

  82. Hii..u have done a great job….i have a request to u…problem is the code is downloading but has errors..not getting opened…im using windows xp…..firefox browser…is that a problem…please let me know..abt this….

  83. Hi Viktor,

    I can not find your source code (Calendar.js) download link. Where it is?

  84. Solved the dialog only displaying the title.
    Add

    templateString: null,

    In CalendarDialog.js, place the above before for each occurrence, of templatePath:….

  85. This is a great widget.

    Does anyone have a working version for dojo 1.3?

  86. […] Creating a Dojo Calendar […]

  87. Hi Viktor,
    Would you please check the source link , it’s pointing to Dojo Tagcloud (Your last Dojo Plugin) instead of Calendar plugin.

    Please update it

    Kind regards,

  88. Can somebody who has Calendar widget already downloaded send it to me in archive to eluzgin@gmail.com please?
    It’s no longer downloadable from this page – link is pointing to wrong plugin “tagcloud”.
    Thanks!

  89. Can somebody who has Calendar widget already downloaded send it to me in archive to javier_linan@hotmail.com please?

    Thanks!

  90. Hi,

    Would you please check the source link , it’s pointing to Dojo Tagcloud.

    Thanks

  91. Can somebody who has Calendar widgetworking with dojo 1.1 or 1.3 send it to me in archive to andrzej.urbanowicz@gmail.com please?

    Thanks!

  92. Can somebody who has Calendar widget already downloaded send it to me in archive to shyeap@infotriever.com please?

    Thanks!

  93. Still asleep on the job, Victor? It’s been months since this page had accurate information (those who left responses earlier this year seemed to see no problems).

  94. This widget only works for Dojo 0.4x.
    At times I have had the urge to update the code and add extra features, but I just don’t have the time right now.

  95. Regardless of it being “old”, it’s still a great example. Hope to see you again at Lotusphere.

  96. can you please give us the Calendar widget? or send it by mail to : soxx@hotmail.fr
    thx, good tutorial.

  97. I was trying to configure your Calendar Example, but the sources do not correspond to Calendar but TagCloud Widget.
    Would you tell me where i could get the correct sources?

  98. Can somebody who has Calendar widgetworking with dojo 1.1 or 1.3 send it to me in archive toz gord.mastergord@gmail.com please?

    Thanks!

  99. Hi,

    We at TAROBY is having a similar Calendar. Currently we have only monthly view of this. We are working on the daily and weekly view implementations and will be available very soon.

    Best regards,
    TAROBY Team.

  100. Does this calendar allow you to publish Domino calendar data? Specifically non mail template calendar views. (simplified data) Basically a calendar view with a Date/time column, description. Of course the Domino generated web page is hideous and I’ve about exhausted my patience trying to find a solution.

  101. plz, i need the calendar widget: badrdouj@gmail.com

  102. Where is “mywidgets” folder ? :(

  103. Is this widget still available somewhere? I could really use it. :x

  104. Please, could give us complete scripts or demo web site?

  105. Thanks for the tutorial. The calendar widget you described is just what we need in Dojo and its surprising that no one has created one. It seems like an excellent candidate for a separate Dojox project.

    We’ve been doing a lot of dojo development for the past 2 years. We are in the process of creating a dojo framework to create highly functional widgets that can be defined in a simple XML markup language on a server. The project is an open source project called, dojobiz.

    code.google.com/p/dojobiz/

    Your calendar widget seems like an excellent candidate for this framework. I realize it is not compatible with current Dojo 1.5 release but are there any design documents or code that we could use to add this to our dojobiz project.

    Thanks,

    Brett

  106. I really need to integrate this wonderful calendar in my spring app, but i can’t find widgets folder and it doesn’t work.
    There’s someone who can help me?

  107. I am trying to select multiple dates in dojo calendar .
    can any one help me to do the same.
    thanks in advance.

  108. Hi,
    I very much like the functionality of the calendar. But I couldnt find the download links of 2 and 3 prereqs. Can you please provide me with those for me to use this in my project.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>