Customized AJAX Calendar Control CSS Example

You can change the look and feel of AJAX calendar control by overriding the default CSS classes. You can learn about default CSS classes of Calendar control in the last article: Ajax calendar extender CSS theme. Create your own CSS for calendar control using user defined name for the new CSS class that would be used to set the CssClass property of Calendar control.

You can customize the look and feel of calendar control similar to the following calendar figure:

Create a CSS stylesheet with name calendar.css and save to in the same directory having the asp.net web page in which you want to link it.

Copy and paste the following CSS code in calendar.css file.

CSS code

.cal_Theme1 .ajax__calendar_container   {
    background-color: #e2e2e2; 
    border:solid 1px #cccccc;
}

.cal_Theme1 .ajax__calendar_header  {
    background-color: #ffffff; 
    margin-bottom: 4px;
}

.cal_Theme1 .ajax__calendar_title,
.cal_Theme1 .ajax__calendar_next,
.cal_Theme1 .ajax__calendar_prev    {
    color: #004080; 
    padding-top: 3px;
}

.cal_Theme1 .ajax__calendar_body    {
    background-color: #e9e9e9; 
    border: solid 1px #cccccc;
}

.cal_Theme1 .ajax__calendar_dayname {
    text-align:center; 
    font-weight:bold; 
    margin-bottom: 4px; 
    margin-top: 2px;
}

.cal_Theme1 .ajax__calendar_day {
    text-align:center;
}

.cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,
.cal_Theme1 .ajax__calendar_active  {
    color: #004080; 
    font-weight: bold; 
    background-color: #ffffff;
}

.cal_Theme1 .ajax__calendar_today   {
    font-weight:bold;
}

.cal_Theme1 .ajax__calendar_other,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_today,
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_title {
    color: #bbbbbb;
}

HTML code for AJAX Calendar Control ASP.Net web page

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:TextBox ID="TextBox1" runat="server" Width="200px"></asp:TextBox>

<asp:Image ID="Image1" runat="server" ImageUrl="images/Calendar.png" /> 
<ajaxToolkit:CalendarExtender 
    CssClass="cal_Theme1" 
    ID="CalendarExtender1" 
    runat="server" 
    PopupButtonID="Image1"
    PopupPosition="Right"
    TargetControlID="TextBox1">
</ajaxToolkit:CalendarExtender>

Note: CssClass Property of ajaxToolkit CalendarExtender is set as cal_Theme1.
It will inherit the styles defined in the calendar.css file to change the look and feel of the calendar control.

Continue to next tutorial: ASP.Net AJAX Cascading Dropdown Control Extender to learn how to load the data items into the dropdown list controls using AJAX.