While at LotusPhere I was searching for a way to create a Calendar using XPages to try and duplicate a Calendar View in the Notes Client. As I've said earlier, I believe this was a big part of XPages that was left out or just forgotten about. Well, I finally broke down and tried creating a Calendar Control on my own. Well I can't really say I did it on my own as I used the tutorials over on Declan's site and I had to enlist some help from Declan to solve a problem with the first row of the calendar. So, without further ado, let's get into it shall we...

First I had decided that I wanted to do this with a table instead of spans as it makes sense to do it that way as in my eyes that's what a calendar is, a table. Also I wanted to be able to navigate the months with links at the top of the table and maybe in the future a dojo calendar control somewhere. I've listed all the steps here in the order that I did things, while this may not make sense to some people it's what made sense to me. I guess I probably should've listed these steps in the order that they fall within the code, but I figured it best to go about how I did it. At the end of the article I will include all of the source code so it's just a copy and paste afair.

NOTE: Seems some of the strings within this document in the text areas are being screwed with for some reason. I will place an example DB in the downloads section shortly. Of particular note, the <[CDATA[ tags should read <[![CDATA

So, I started putting this thing together by starting with the Calendar table in a panel with the header and then the starting row of the actual calendar:
<xp:table styleClass="calTable" id="calTable"> <thead styleClass="calTableHead"> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </thead> <xp:text escape="false" id="startRows"> <xp:this.value><![CDATA[#{javascript:"<tr>"}]]></xp:this.value> </xp:text>

Next up is getting the blank cells that will appear when the starting date isn't a Sunday. This requires us to get some information when the page is loaded. We need to know what month, year, the day the 1st falls on and how many days are in the month. We do this with some viewScope variables in the "beforePageLoad" event of the control:
<xp:this.beforePageLoad><![CDATA[#{javascript:if (!viewScope.containsValue("dispDate")) { viewScope.dispDate = @Now(); viewScope.dispCalYear = @Year(viewScope.dispDate); viewScope.dispCalMonth = @Month(viewScope.dispDate); viewScope.daysInMonth = new Date(viewScope.dispCalYear,viewScope.dispCalMonth,0).getDate(); viewScope.firstDayInMonth = new Date(viewScope.dispCalYear,viewScope.dispCalMonth -1,1).getDay(); }}]]></xp:this.beforePageLoad>

Once the blanks are figured out we just need to start filling in the blank days of the calendar. This is just a computed field inside a repeat function:
<xp:repeat id="calBlanks" rows="7" value="#{javascript:viewScope.firstDayInMonth;}" var="calBlankVar"> <xp:text id="blankCells" contentType="html"> <xp:this.value><![CDATA[#{javascript:'<td class="calBlank"> </td>';}]]></xp:this.value> </xp:text> </xp:repeat>

Now we need to cycle through the days and place them within a TD and include the day number. There are a couple of things of special note here.

1. The computed field that adds the closing and opening tags for the rows, this needs to come BEFORE the first entry of the week, NOT AFTER!
2. In the computed field that puts the day number in the cell, you need to add 1 to the day because the days are zero based. If you don't do this the first will actually read zero
3. Also, we don't need any logic to figure out the contents of the cell since we're determining if a new row is needed in the first computed field within this repeat

<xp:repeat id="calDay" rows="31" value="#{javascript:viewScope.daysInMonth;}" var="calVar" indexVar="calIndex"> <xp:text escape="false" id="rowEndBegin"> <xp:this.value><![CDATA[#{javascript:"</tr><tr>"}]]></xp:this.value> <xp:this.rendered><![CDATA[#{javascript:if (calIndex != 0) { if (((calIndex + viewScope.firstDayInMonth) % 7) == 0) { return true; }else{ return false; } }}]]></xp:this.rendered> </xp:text> <xp:text escape="false" id="dayCells"> <xp:this.value><![CDATA[#{javascript:var calDayTD = '<td class="calDay"><span class="dayNum">' + (calVar+1) + '</span></td>'; return calDayTD;}]]></xp:this.value> </xp:text> </xp:repeat>

Last part of the calendar table is the blank days after the end of the month when the last day isn't on Saturday and then close the final row of the table. This is accomplished with another repeat control and a computed field:
<xp:repeat id="calBlanksEnd" rows="14"> <xp:this.value><![CDATA[#{javascript:var lastRow = 42 - (viewScope.daysInMonth + viewScope.firstDayInMonth); if (lastRow > 13) { lastRow = lastRow - 14; }else if (lastRow > 6) { lastRow = lastRow - 7; } return lastRow;}]]></xp:this.value> <td class="calBlank"></td> </xp:repeat> <xp:text escape="false" id="lastRow"> <xp:this.value><![CDATA[#{javascript:"</tr>"}]]></xp:this.value> </xp:text>

Finally we need to add a Title Header to the top of the calendar to show the month and then a couple of links to navigate forward and back. This is accomplished using 2 links and a computed field. The month which is displayed in the computed field is determined from the contents of an array which contains all the months and we then use the viewScope.dispCalMonth variable minus 1. The links change the viewScope variables to use the correct date. All of this is placed inside a panel:
<xp:panel id="calendar"> <xp:panel styleClass="calMonthTitle" id="Header"> <xp:link escape="true" id="monthBack"><xp:this.text><![CDATA[<<]]></xp:this.text> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action><![CDATA[#{javascript:var curMonth = @Month(viewScope.dispDate); var curYear = @Year(viewScope.dispDate) curMonth = (@Month(viewScope.dispDate)-1); var curDate = new Date(curYear,curMonth -1,1); viewScope.put("dispDate",curDate); viewScope.put("dispCalYear",@Year(viewScope.dispDate)); viewScope.put("dispCalMonth",@Month(viewScope.dispDate)); var monthDays = new Date(viewScope.dispCalYear,viewScope.dispCalMonth,0).getDate(); var monthFirstDay = new Date(viewScope.dispCalYear,viewScope.dispCalMonth -1,1).getDay(); viewScope.put("daysInMonth",monthDays); viewScope.put("firstDayInMonth",monthFirstDay);}]]></xp:this.action> </xp:eventHandler></xp:link>    <xp:text escape="false" id="dispMonth"> <xp:this.value><![CDATA[#{javascript:var months = new Array("January","Feburary","March","April","May","June","July","August","September","October","November","December"); var curMonth = months[(viewScope.dispCalMonth-1)]; return curMonth + " " + viewScope.dispCalYear;}]]> </xp:this.value > </xp:text>    <xp:link escape="true" id="monthForward"> <xp:this.text><![CDATA[>>]]></xp:this.text> <xp:this.onclick><![CDATA[#{javascript:var curMonth = @Month(viewScope.dispDate); var curYear = @Year(viewScope.dispDate) curMonth = (@Month(viewScope.dispDate)+1); var curDate = new Date(curYear,curMonth -1,1); viewScope.put("dispDate",curDate); viewScope.put("dispCalYear",@Year(viewScope.dispDate)); viewScope.put("dispCalMonth",@Month(viewScope.dispDate)); var monthDays = new Date(viewScope.dispCalYear,viewScope.dispCalMonth,0).getDate(); var monthFirstDay = new Date(viewScope.dispCalYear,viewScope.dispCalMonth -1,1).getDay(); viewScope.put("daysInMonth",monthDays); viewScope.put("firstDayInMonth",monthFirstDay);}]]></xp:this.onclick> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action><![CDATA[#{javascript:var curMonth = @Month(viewScope.dispDate); var curYear = @Year(viewScope.dispDate) curMonth = (@Month(viewScope.dispDate)+1); var curDate = new Date(curYear,curMonth -1,1); viewScope.put("dispDate",curDate); viewScope.put("dispCalYear",@Year(viewScope.dispDate)); viewScope.put("dispCalMonth",@Month(viewScope.dispDate)); var monthDays = new Date(viewScope.dispCalYear,viewScope.dispCalMonth,0).getDate(); var monthFirstDay = new Date(viewScope.dispCalYear,viewScope.dispCalMonth -1,1).getDay(); viewScope.put("daysInMonth",monthDays); viewScope.put("firstDayInMonth",monthFirstDay);}]]></xp:this.action> </xp:eventHandler> </xp:link></xp:panel>

Now, to put all of this together:
<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.beforePageLoad><![CDATA[#{javascript:if (!viewScope.containsValue("dispDate")) { viewScope.dispDate = @Now(); viewScope.dispCalYear = @Year(viewScope.dispDate); viewScope.dispCalMonth = @Month(viewScope.dispDate); viewScope.daysInMonth = new Date(viewScope.dispCalYear,viewScope.dispCalMonth,0).getDate(); viewScope.firstDayInMonth = new Date(viewScope.dispCalYear,viewScope.dispCalMonth -1,1).getDay(); }}]]></xp:this.beforePageLoad> <xp:panel id="CreditWhereCreditIsDue" rendered="false"> Credit where credit is due: <xp:br /> This control was created using the technique described on Declan Lynch's site on creating a calendar. It has been adapted to use a table instead of spans. Without Declan's help this control would not have been created in such a timely manner. </xp:panel> <xp:panel id="calendar"> <xp:panel styleClass="calMonthTitle" id="Header"> <xp:link escape="true" id="monthBack"><xp:this.text><![CDATA[<<]]></xp:this.text> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action><![CDATA[#{javascript:var curMonth = @Month(viewScope.dispDate); var curYear = @Year(viewScope.dispDate) curMonth = (@Month(viewScope.dispDate)-1); var curDate = new Date(curYear,curMonth -1,1); viewScope.put("dispDate",curDate); viewScope.put("dispCalYear",@Year(viewScope.dispDate)); viewScope.put("dispCalMonth",@Month(viewScope.dispDate)); var monthDays = new Date(viewScope.dispCalYear,viewScope.dispCalMonth,0).getDate(); var monthFirstDay = new Date(viewScope.dispCalYear,viewScope.dispCalMonth -1,1).getDay(); viewScope.put("daysInMonth",monthDays); viewScope.put("firstDayInMonth",monthFirstDay);}]]></xp:this.action> </xp:eventHandler></xp:link>    <xp:text escape="false" id="dispMonth"> <xp:this.value><![CDATA[#{javascript:var months = new Array("January","Feburary","March","April","May","June","July","August","September","October","November","December"); var curMonth = months[(viewScope.dispCalMonth-1)]; return curMonth + " " + viewScope.dispCalYear;}]]></xp:this.value> </xp:text>   <xp:link escape="true" id="monthForward"><xp:this.text><![CDATA[>>]]></xp:this.text> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action><![CDATA[#{javascript:var curMonth = @Month(viewScope.dispDate); var curYear = @Year(viewScope.dispDate) curMonth = (@Month(viewScope.dispDate)+1); var curDate = new Date(curYear,curMonth -1,1); viewScope.put("dispDate",curDate); viewScope.put("dispCalYear",@Year(viewScope.dispDate)); viewScope.put("dispCalMonth",@Month(viewScope.dispDate)); var monthDays = new Date(viewScope.dispCalYear,viewScope.dispCalMonth,0).getDate(); var monthFirstDay = new Date(viewScope.dispCalYear,viewScope.dispCalMonth -1,1).getDay(); viewScope.put("daysInMonth",monthDays); viewScope.put("firstDayInMonth",monthFirstDay);}]]></xp:this.action> </xp:eventHandler></xp:link></xp:panel> <xp:table styleClass="calTable" id="calTable"> <thead styleClass="calTableHead"> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </thead> <xp:text escape="false" id="startRows"> <xp:this.value><![CDATA[#{javascript:"<tr>"}]]></xp:this.value> </xp:text> <xp:repeat id="calBlanks" rows="7" value="#{javascript:viewScope.firstDayInMonth;}" var="calBlankVar"> <xp:text id="blankCells" contentType="html"> <xp:this.value><![CDATA[#{javascript:'<td class="calBlank"> </td>';}]]></xp:this.value> </xp:text> </xp:repeat> <xp:repeat id="calDay" rows="31" value="#{javascript:viewScope.daysInMonth;}" var="calVar" indexVar="calIndex"> <xp:text escape="false" id="rowEndBegin"> <xp:this.value><![CDATA[#{javascript:"</tr><tr>"}]]></xp:this.value> <xp:this.rendered><![CDATA[#{javascript:if (calIndex != 0) { if (((calIndex + viewScope.firstDayInMonth) % 7) == 0) { return true; }else{ return false; } }}]]></xp:this.rendered> </xp:text> <xp:text escape="false" id="dayCells"> <xp:this.value><![CDATA[#{javascript:return '<td class="calDay"><span class="dayNum">' + (calVar+1) + '</span></td>';}]]></xp:this.value> </xp:text> </xp:repeat> <xp:repeat id="calBlanksEnd" rows="14"> <xp:this.value><![CDATA[#{javascript:var lastRow = 42 - (viewScope.daysInMonth + viewScope.firstDayInMonth); if (lastRow > 13) { lastRow = lastRow - 14; }else if (lastRow > 6) { lastRow = lastRow - 7; } return lastRow;}]]></xp:this.value> <td class="calBlank"></td> </xp:repeat> <xp:text escape="false" id="lastRow"> <xp:this.value><![CDATA[#{javascript:"</tr>"}]]></xp:this.value> </xp:text> </xp:table> </xp:panel> </xp:view>

So, I hope you find this control useful. The next steps (which I haven't quite figured out yet) are to put some data from a view onto the calendar and to add some more functionality to try and match that which is found in a notes calendar view. I am also wanting to put a calendar control somewhere on the page so you can pick a particular date that may be more than a year or so in the past/future.

UPDATE: OK, I think I've got all the formatting stuff fixed. I had to use HTML Encoding on all the items. I'll still put an example db in the downloads section. I also added a screen shot to the read more section.