Tuesday, February 9, 2010

AJAXToolkit:CalendarExtension usage simple example

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


AJAX Calendar Theme







TargetControlID="TextBox1" PopupPosition="Right">






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.