The other day I showed you how to make a custom control for an empty calendar. While neat it really isn't very useful unless you can put some data on it. So today's SnTT is to put some data on the calendar. Also, it seems there was a bug in the original code for the month "forward" and "back" links which caused the calendar to do some weird things, but no worries, that has now been fixed and is available in the download.

Now, on adding data. We're not concerning ourselves yet with durations, we'll have to tackle that later down the road and I'm sure I'll have to tap into some people who are smarter than myself. Right now we're only concerned with putting data within the appropriate day, having it formatted correctly and not enlarging the cell to fit the data but instead having a scrollbar available to scroll through the entries. We also want a dojo tooltip to show up when we hover our mouse over an entry so we can see any text that gets cut off. To accomplish this, the contents of a cell are made up of several divs. We use divs so that everything spans the entire width of the cell:

• A div containing the number which is the day
• A div containing all the entries for that day
• A div for each entry
• A div for the text of a tool tip

With our goal now defined we can start coding a little bit. I created a form called calEnt with just a few fields on it:

• StartDate (we'll get to the EndDate/Time at some other point in the future)
• StartTime
• Subject

• StartDate - Sorted Ascending - This is text and not a date as it seems that the server side javascript @DbLookup can't lookup a date, it must be a string
• StartTime - Sorted Ascending
• Subject
• Unique ID

Now we need to get some data and put it on the calendar. We'll do this in the computed field which we had named in our previous SnTT named "dayCells". To support this we had to add a couple of script libraries, one for Server Side Javascript and another for Client Side Javascript. The functions in the Server Side Javascript Library came from the article Work with DbColumn and DbLookup on the You at Notes website. I had to tweak the requestScope scoped variable check to also include the field (or in our case column) to ensure that there is 2 different requestScope variables. The functions in that library ensure that DbColumn and DbLookup calls are returned as an array, this is quite useful. The Client Side Javascript Library is for a function to handle the onClick event of a calendar entry. I'm not going to go into the code of these functions as they are available in the download.

In the dayCells computed field we start building the table cell with all the divs. Just note you need to change the view name with whatever view name you use in the DbLookupArray calls. You should end up with something like this:
var beginTD = '<td class="calDay"><div class="dayNum">' + (calVar+1) + '</div><div class="allDay">'; var luMonth = viewScope.get("dispCalMonth"); var luDay = (calVar+1); if (@Length(luMonth) == 1) { luMonth = "0" + luMonth; } if (@Length(luDay) == 1) { luDay = "0" + luDay; } /* * NOTE: Be sure to change the view name in the DbLookupArray calls */ var luKey = luMonth + "/" + luDay + "/" + viewScope.get("dispCalYear"); var luKeyUNID = luMonth + "/" + luDay + "/" + viewScope.get("dispCalYear"); var rawData = DbLookupArray("luDates",luKey,3); var docData = DbLookupArray("luDates",luKeyUNID,4); if (!@IsError(rawData)) { for(i = 0;i < @Elements(rawData);i++) { if (i == 0) { var viewData = '<div class="calData"' + 'onclick="calEntOnClick(\'' + docData[i] + '\');"' + 'id="calData-' + docData[i] + '">' + rawData[i] + '</div>' + '<div style="display:none" dojoType="dijit.Tooltip" connectId="calData-' + docData[i] + '" position="top">' + rawData[i] + '</div>'; }else{ viewData = viewData + '<div class="calData"' + 'onclick="calEntOnClick(\'' + docData[i] + '\');"' + 'id="calData-' + docData[i] + '">' + rawData[i] + '</div>' + '<div style="display:none" dojoType="dijit.Tooltip" connectId="calData-' + docData[i] + '" position="top">' + rawData[i] + '</div>'; } } }else{ var viewData = ""; } var endTD = '</div></td>'; return beginTD + viewData + endTD;

Now we need a form to display our calendar entry in another custom control. This is just a simple form with 4 fields on it. I haven't really made it pretty or anything I just wanted to ensure that it worked, we can make it pretty later. So, I created a custom control with the same fields as the CalEnt form with the exception I added a computed field which contains the UNID of the document we're displaying. This is really just there for troubleshooting purposes but I thought I would list it to show how to get data from a parameter in the URL. I'm passing the UNID of the document we clicked on in the calendar to the URL because since we hand coded the div which contains the data from the view, client side javascript is used to navigate to the "entry" XPage via an onClick event, so we pass the UNID via an URL parameter:
param.get("unid");

We also need to bind our new custom control to the form. You do this in the Data section of the custom control:


And in the document ID field we add our param code again as Server Side Javascript:
param.get("unid");

You should now have a calendar that has data on it that is clickable which opens up the corresponding document. Next up is configuring our XPage so that the dojo tool tips pop up whenever you hover the mouse over an entry. So, since our calendar control is on the default XPage we need to set some properties here to make the dojo tool tips work. On the default XPage All Properties section of the XPage Properties, set the dojoParseOnLoad = True, dojoTheme = True. Also add a resource and pick dojoModule and for the name set it to dijit.Tooltip. Also under the styleClass property define Tundra as the styleClass. It should look like this:

And, that's it. You should now end up with this:

I'm sure there is a better way to handle the binding of data to the calendar, but as I'm really just now starting to really delve into XPages I haven't quite figured out everything I can do yet. So, if you have a better way, please speak up.