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

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 The first part of these were basically done in Part 4, for the data column I put a 4 row table in each hour's row. Well, this has changed. Now each hour's row contains a container div (dayTimeMinutesContainer-hour) and then a minutes div (dayTimeMinutes-hour) for each entry that goes in that particular hour. I tried building all of these divs within the repeat for the table that we built in Part 4, well this didn't even come close to working. So, I came to the conclusion that the best method would be to build the dayTimeMinutes-hour divs on the fly. After some head scratching and digging through the internet I came upon dojo.create. This allows you to create a DOM Node very easily. I also came across dojo.style. This allows you to set the style of a DOM Node. With this knowledge in hand I