If you recall we left off from Part 4 with a blank day and week view. Well, through much gritting and knashing of teeth I've finally got some data on the day view. Now before I go any farther, I would like to thank a few people whom without I'm sure I would still be sitting here scratching my head trying to figure out how to do this:

• Nathan Freeman for pointing me to an Article by Jeremy Hodge on embedding data within an XPage in order to make it accessible via client side JavaScript
• Jeremy Hodge for this article and also cluing me in on using the dojo.addOnLoad function
• Steve Castledine for showing me that @DbLookup, sessionScope.get("whatever") works with client side javascript that is on an XPage
• Julian Buss for this wiki article

In order to set some guidelines of what we're trying to accomplish:

• Build a day view calendar with the times down the left side of the page and entry data for a specific day on the right
• Entries should show duration like the Notes Mail Calendar using a rectangle
• Entry rectangles should be as wide as the calendar unless there is more than 1 entry for an hour, then they should be side by side but still take up the entire width of the calendar

So, let's get started. First we need to define a few dojo resources. So, in the properties for the custom control navigate to the All Properties tab and add 4 resources:

• dojox.gfx
• dojox.gfx.move
• dojox.gfx.shape
• dojo.Colors

We just need to get some data now and then we can start working on the function that will build all our entries. Go take a look at a post by Jeremy Hodge and then scroll down the comments where he replies to me and explains how to build a heirachial XML type data structure from the entries. Well, this is the precise method I used. I added a repeat control and then added my "tags" within this repeat with their values. I added a view to the data sources of the ccCalDay control and also defined a "keys" and set "exact match" to true so that the view would only contain the entries for this day:
var luMonth = (sessionScope.get("dispDate").getMonth() + 1); var luDay = sessionScope.get("dispDate").getDate(); if (@Length(luMonth) == 1) { luMonth = "0" + luMonth; } if (@Length(luDay) == 1) { luDay = "0" + luDay; } return luMonth + "/" + luDay + "/" + sessionScope.get("dispDate").getFullYear();

Here's the source for the repeat which builds all of our data:
<xp:repeat id="repeat1" rows="999" indexVar="entryIndex" value="#{lookupTimes}" var="entryVar"> <calEntry UNID="#{javascript:entryVar.getUniversalID()}"> <startDate value='#{javascript:entryVar.getColumnValue("StartDate")}' /> <startTime value='#{javascript:entryVar.getColumnValue("StartTime")}' /> <endDate value='#{javascript:entryVar.getColumnValue("EndDate")}' /> <endTime value='#{javascript:entryVar.getColumnValue("EndTime")}' /> <duration value='#{javascript:entryVar.getColumnValue("Duration")}' /> <subject value='#{javascript:entryVar.getColumnValue("Subject")}' /> <toolTip value='#{javascript:entryVar.getColumnValue("ToolTip")}' /> </calEntry> </xp:repeat>
I guess instead of defining a view as the data source, I should probably do this via a Property Definition, but I just needed to get this thing working as I've been getting frustrated with trying to figure out pixel counts and such.

So, that gives us our data for all the entries. Now it's just a matter of getting this data when the day.xsp XPage loads and doing something with it. In the source of the ccCalDay custom control at the bottom I've added the following javascript to run a javascript function after the page loads.
<script type="text/javascript"> dojo.addOnLoad(function() {addOnLoadFunc()}); </script>
The addOnLoadFunc is a function in the XPCalendarClient javascript library which is added as a source to the ccCalDay custom control. This function is the work horse of the day view and is what builds all the minute divs, sets the styles and adds the rectangles to the page.

So, I'm just going to briefly explain each of the loops inside this function. I'm sure there is a better way than how I've done this but at the moment this is the best I've come up with. So to start with we've got to get all the data we produced in the repeat above. The data above is contained within a div with an id of "contextual", we get all the nodes within the contextual div.
var calEntries = dojo.query('calEntry',dojo.byId('contextual'));
Next up we just get a couple more variables and get into our first loop. With this loop we get everything we need, start date/time, end date/time, duration, subject, tool tip, start hour, end hour, starting minutes, the hours the entry spans, the div id for this entry and lastly the number of divs that should be in the dayTimeMinutesContainer div. Now I know there is a problem here, because of something in this loop one of the limitations of this is that it only supports up to 2 different entries in any hour. I'm sure it's because of how I'm handling it so I just need to fix it. But here is the loop:
var allEntries = new Array(); var allHours = new Array(); for (i = 0;i < calEntries.length;i++) { allEntries[i] = new Array(); allEntries[i][0] = dojo.attr(calEntries[i], 'UNID'); allEntries[i][1] = new Date(dojo.attr(dojo.query('startDate',calEntries[i])[0], 'value') + " " + dojo.attr(dojo.query('startTime',calEntries[i])[0], 'value')); allEntries[i][2] = new Date(dojo.attr(dojo.query('endDate',calEntries[i])[0], 'value') + " " + dojo.attr(dojo.query('endTime',calEntries[i])[0], 'value')); allEntries[i][3] = dojo.attr(dojo.query('duration',calEntries[i])[0], 'value'); allEntries[i][4] = dojo.attr(dojo.query('subject',calEntries[i])[0], 'value'); allEntries[i][5] = dojo.attr(dojo.query('toolTip',calEntries[i])[0], 'value'); allEntries[i][6] = allEntries[i][1].getHours(); allEntries[i][7] = allEntries[i][2].getHours(); allEntries[i][8] = allEntries[i][1].getMinutes(); //Determine the hours this entry spans for (j = allEntries[i][6];j <= allEntries[i][7];j++) { if (j == allEntries[i][6]) { allEntries[i][9] = j; }else{ if (allEntries[i][2].getMinutes() == 0 && j < allEntries[i][7]) { allEntries[i][9] = allEntries[i][9] + "," + j; }else if (allEntries[i][2].getMinutes() > 0 && allEntries[i][3] >= (60 - allEntries[i][2].getMinutes())) { allEntries[i][9] = allEntries[i][9] + "," + j; } } } //Figure out the div id for this entry. We also need to determine // how many entries are in this hour so we know what size and // location later on for the div. //For some reason this only works for up to 2 divs within the same // hour. I think it's because I rename the div id so it's not found // when it gets to the 3rd one. allHours[i] = allEntries[i][6]; var srch = allHours[i]; var counter = 1; allEntries[i][11] = counter; if (i > 0) { if (allHours.indexOf(srch) > -1) { if (allHours.indexOf(srch) != i) { var hourIndex = allHours.indexOf(srch); while (hourIndex != -1) { allEntries[hourIndex][11] = allEntries[hourIndex][11] + 1; allHours[hourIndex] = allHours[hourIndex] + "-" + (counter - 1); hourIndex = allHours.indexOf(srch); counter = counter + 1; } } } } allEntries[i][10] = "dayTimeMinutes-" + allHours[i]; }

Next up we loop through all the entries we gathered above and build all the divs.
for (i = 0;i < allEntries.length;i++) { //Build a div for this entry var containerID = "dayTimeMinutesContainer-" + allEntries[i][6]; dojo.create("div",{id:allEntries[i][10]},containerID); }

Ok, we now set the style of all the dayTimeMinutes-hour divs for each hour that only has one entry. I do this for single entry hours only, because it's easier to figure out where the dayTimeMinutes div will be placed on the page and how wide it will be if we only have to deal with containers which contain more than one dayTimeMinutes div. But in setting the style for the dayTimeMinutes divs we get the dayTimeMinutesContainer coordinates so we can determine exactly where on the page the dayTimeMinutes div will be placed. We have to determine it's location because it has a position of "absolute" and the dayTimeMinutesContainer has a position of relative. This allows us to place the dayTimeMinutes div anywhere on the page we want. But, we see how wide the dayTimeMinutesContainer is and also get it's X coordinates and pass that on to the style for the dayTimeMinutes div. While we're looping through all the entries we determine if a container has more than 1 div and if so, we just record that in another array.
var multiDivs = new Array(); for (i = 0;i < allEntries.length;i++) { var containerID = "dayTimeMinutesContainer-" + allEntries[i][6]; var containerCoords = dojo.coords(dojo.byId(containerID)); var containerWidth = (containerCoords.w/allEntries[i][11]); //Determine the X coordinates. If there are more than 1 // div in the container we'll set the style after this loop // for each of the other divs var containerX = containerCoords.x; var containerDivs = dojo.query('#' + containerID + ' > *'); if (containerDivs.length == 1) { dojo.style(allEntries[i][10],{ "position":"absolute", "left":containerX + "px", "width":containerWidth + "px" }); }else{ if (multiDivs.indexOf(containerID) == -1) { multiDivs.push(containerID); } } }

Now we loop through the multiDivs array and set the style and determine the width of the dayTimeMinutes divs.
for (i = 0;i < multiDivs.length;i++) { var containerCoords = dojo.coords(dojo.byId(multiDivs[i])); var minuteDivs = dojo.query('#' + multiDivs[i] + ' > *'); var containerWidth = (containerCoords.w/minuteDivs.length); var containerX; for (j = 0;j < minuteDivs.length;j++) { if (j == 0) { containerX = containerCoords.x; }else{ containerX = (containerX + (containerCoords.w/minuteDivs.length)); } dojo.style(dojo.attr(minuteDivs[j], 'id'),{ "position":"absolute", "left":containerX + "px", "width":containerWidth + "px" }); } }

OK, the last loop will determine the Y coordinates of the div and then place a dojox.gfx surface on the page within the appropriate dayTimeMinutes div. This surface is what will hold the rectangle that represents the entry and duration. We also set a dojo color which in our case will be a gradient.
for (i = 0;i < allEntries.length;i++) { var entColor = { type:"linear", x1:0, y1:540, x2:0, y2:0, colors:[ {offset:0,color:[207,241,176]}, {offset:1,color:[209,239,198]} ] }; //Set the "top" style attribute dependent on the minutes var xyCoords = dojo.coords(dojo.byId(allEntries[i][10])); if (allEntries[i][8] > 0) { dojo.style(allEntries[i][10],"top",(xyCoords.y + allEntries[i][8]) + "px"); }else{ dojo.style(allEntries[i][10],"top",xyCoords.y + "px"); } //Create a surface in the appropriate div var surface = dojox.gfx.createSurface(allEntries[i][10],xyCoords.w,allEntries[i][3]); var group = surface.createGroup(); var rect = group.createRect({x:2, y:0, width:(xyCoords.w-2), height:allEntries[i][3], r:5}) .setFill(entColor) .setStroke({type:"stroke", color:[161,209,151], style:"solid", width:1}); var rectTxt = allEntries[i][4] + "-" + allEntries[i][6] + ":" + allEntries[i][8] + " to " + allEntries[i][7] + ":" + allEntries[i][2].getMinutes(); var t = group.createText({x:5,y:12,text:rectTxt}) .setFont({family:"Arial",size:"9pt",weight:"normal"}) .setFill("black"); }
And that's it really. You should end up with something like this:

UPDATE: I've added the demo application to the downloads section. Also, I forgot to mention, this works with all browsers except IE. I believe this may be a limitation with dojo.gfx, but more research will need to be done to determine this exactly.