Styling an AJAX Calendar Control

The AJAX Calendar control is a nifty control that attaches to a .NET control (i.e. textbox). The calendar is launched by clicking in the text box. Once the calendar is displayed, a user can browse through the years and months and select a date. The date is then placed in the calling text box or .NET control.

The styling of this control is fairly generic. Below is the code to style an AJAX calendar control

For the control properties, I am using this:

<cc1:CalendarExtender ID="ceChangeCopy" runat="server" TargetControlID="txtChangeCopy" Format="MM/dd/yyyy" CssClass="AJAXCalendar" />

For the CSS code, I am using this:

.AJAXCalendar .ajax__calendar_container {border:solid 1px #CDCDB5; background: transparent url(images/calendarbg.gif) repeat-x; width: 180px; z-index : 1000 ;}
.AJAXCalendar .ajax__calendar_footer {border-top:1px solid silver;}
.AJAXCalendar .ajax__calendar_dayname { font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100; border-bottom:1px solid #f5f5f5; }
.AJAXCalendar .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: bold;border:1px solid #ffffff;}
.AJAXCalendar .ajax__calendar_month {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;border:1px solid #ffffff;}
.AJAXCalendar .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;border:1px solid #ffffff;}
.AJAXCalendar .ajax__calendar_today {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;}
.AJAXCalendar .ajax__calendar_title {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;}
.AJAXCalendar .ajax__calendar_active .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#0066cc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_active .ajax__calendar_month {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#0066cc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_active .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#0066cc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_other .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#ffffff;border-color:#ffffff;color:gray;}
.AJAXCalendar .ajax__calendar_other .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#ffffff;border-color:#ffffff;color:gray;}
.AJAXCalendar .ajax__calendar_hover .ajax__calendar_day {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#daf2fc;}
.AJAXCalendar .ajax__calendar_hover .ajax__calendar_month {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#daf2fc;color:#0066cc;}
.AJAXCalendar .ajax__calendar_hover .ajax__calendar_year {font-family: Calibri, Arial, Sans-Serif; font-size: 1.2em; font-weight: 100;background-color:#d9e8f1;border-color:#daf2fc;color:#0066cc;}
.AJAXCalendar .ajax__calendar { position: relative; left: 0px !important; top: 0px !important; visibility: visible; display: block; }
.AJAXCalendar .ajax__calendar iframe { left: 0px !important; top: 0px !important; }