Setting Styles
If you look at the HTML generated by the Calendar class, it looks something like this:
<table class=calendar>
<tr>
<td align="center" valign="top"> </td>
<td align="center" valign="top" class=calendarHeader colspan=5>
December 1964</td>
<td align="center" valign="top"> </td>
</tr>
<tr>
<td align="center" valign="top" class="calendarHeader">S</td>
<td align="center" valign="top" class="calendarHeader">M</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">W</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">F</td>
<td align="center" valign="top" class="calendarHeader">S</td>
</tr>
<tr>
<td class="calendar" align="right" valign="top"> </td>
<td class="calendar" align="right" valign="top"> </td>
<td class="calendar" align="right" valign="top">1</td>
<td class="calendar" align="right" valign="top">2</td>
<td class="calendar" align="right" valign="top">3</td>
<td class="calendar" align="right" valign="top">4</td>
<td class="calendar" align="right" valign="top">5</td>
</tr>
:
:
</table>
Each element in the table has an associated CSS class. You can customise
the look of by simply defining the CSS classes calendar and
calendarHeader in a style sheet - either linked or embedded.
The following style classes are used:
calendarHeader |
The table cells containg header parts of the calendar - i.e. the Year and the Month Name. |
calendarToday |
The date cell corresponding to "today" |
calendar |
All table cells other than those covered by calendarHeader
and calendarToday |
For example, to produce calendars like the ones in these examples, you could include the following styles in your document:
<style type="text/css">
<!--
.calendarHeader {
font-weight: bolder;
color: #CC0000;
background-color: #FFFFCC;
}
.calendarToday {
background-color: #FFFFFF;
}
.calendar {
background-color: #FFFFCC;
}
-->
</style>