Styling a .NET Calendar Control

ASP.NET comes with a very handy calendar control. This control will allow a user to click on a calendar icon and view a calendar. They can browse the different years and months and select a date. Once a date has been selected, it is displayed in the .NET control wired to the calendar control.

While this calendar control is very handy, the default styling is very generic. Below is my attempt at styling the calendar. I have found the control to be very finicky with using CSS. So, therefore, I am using a combination of control properties and CSS.

For the control properties, I am using this:

<asp:Calendar ID="calRunDate" runat="server" OnDayRender="calRunDate_DayRender" CssClass="myCalendar" DayNameFormat="FirstTwoLetters" ShowGridLines="true" CellPadding="1" TitleStyle-BackColor="Transparent" OtherMonthDayStyle-BackColor="white" OtherMonthDayStyle-ForeColor="gray" PrevMonthText=" <img src='images/caltriangleleft.gif' border='0'>" NextMonthText="<img src='images/caltriangleright.gif' border='0'> " TitleStyle-CssClass="calTitleStyle" OtherMonthDayStyle-CssClass="calOtherMonthDayStyle" NextPrevStyle-CssClass="calNextPrevStyle" DayHeaderStyle-CssClass="calDayHeaderStyle" TodayDayStyle-CssClass="calTodayDayStyle" SelectorStyle-CssClass="calSelectorStyle" WeekendDayStyle-CssClass="calWeekendDayStyle" SelectedDayStyle-CssClass="calSelectedDayStyle" DayStyle-CssClass="calDayStyle"></asp:Calendar>

For the CSS, I am using this:

.myCalendar { border: solid 1px #CDCDB5; width: 180px; background: url(images/calendarbg.gif) repeat-x; z-index: 1000; }
.myCalendar .calDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calDayStyle a:hover { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calSelectedDayStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calWeekendDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calSelectorStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calTodayDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: bold; }
.myCalendar .calDayHeaderStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calNextPrevStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calOtherMonthDayStyle a { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; }
.myCalendar .calTitleStyle { font-family: Calibri, Arial, Sans-Serif; font-size: 1em; font-weight: 100; height: 10px; }