In my last blog entry I showed how it was
possible to build a calendar using a couple of repeat controls and some
CSS but in reality a calendar is more suited to be displayed as a table.
By using a table your calendar will also degrade nicely in older web browsers
so I decided to give it a shot and see if it was possible to do in XPages.
The basic concept is still the same.
I need to know how many days there are in the month and I need to know
what day to start the first calendar entry on. Because I’m using a table
I will also need to complete the last row of table columns with blank entries
so this means I will need another repeat control.
In the CSS version of the calendar I
assigned the first day of each week a slightly different style so that
it would ensure that the row would move down. In a table I will need to
close a table row tag and open a new one. At first I tried to just add
a </xp:tr> and a <xp:tr> tag into the main repeat and set their
‘rendered’ value so that they would only render on the first day of each
week but Domino Designer would not allow me to do this because you cannot
add a ‘rendered’ value to a closing tag, only the opening tag.
To get around this I decided to just
fool the xpages rendering engine to output the closing and reopening table
row tags by using a computed field that is set to send it’s results to
the web browser as html.
This worked perfectly, before the repeat
control outputs the first table column of the week and closing tag for
the previous table row and then an opening tag for the next table row is
sent to the browser.
The last thing I needed to do was add
an extra repeat to fill out the blank table columns at the end of the last
row and then I needed to close the final table row before closing the entire
table. The maximum number of rows that a calendar might take is 6, this
means that your calendar table must have at least 42 table columns split
over the 6 rows. You already know the number of blanks at the start of
the table and the number of days in the month so subtracting these from
42 will give you the number of blanks at the end of the table.
Of course it’s entirely possible for
a calendar month to only need 4 rows, as was the case in February this
year where the first of the month was a Sunday and the 28th of the month
was a Saturday so we need to check the result of our calculation to remove
any blank rows by subtracting either 14 or 7 as necessary.
Now we just need to apply a little CSS
just for the table and we have a working calendar control in XPages based
on a table.