How to Set CssClass for Ajax Calender

AJAX Calendar control has a set of CSS classes that you can override by using new styles. To do this you need a new name for user defined class for example .cal_Theme1 and associate it with the default names of CSS classes to override the default styles. After setting the values for default CSS classes associated with user defined CSS class name, you can set that class name in the CssClass property of the Calendar control.You can also see Calendar control CssClass

/* Style Sheet attributes Calender */

.cal_Theme1 .ajax__calendar_container

{

background-color: #E9EFF7;

border:solid 1px #cccccc;

height:190px;

}

.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

{

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;

}

.ajax__calendar_today

{

color: #004080;

background-color: #ffffff;

position:relative;

top:5px;

}

/* .aspx code*/

<asp:TextBox ID="txtPostedDate" runat="server" ToolTip="Please select date from calendar"

onkeypress="return false;" onkeydown="return false;" oncontextmenu="return false;">asp:TextBox>

<asp:ImageButton ID="imagePostedDate" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" />

<ajaxToolkit:CalendarExtender ID="cePostedDate" Format="yyyy-MM-dd" runat="server"

TargetControlID="txtPostedDate" FirstDayOfWeek="Sunday" PopupButtonID="imagePostedDate"

PopupPosition="BottomRight" Enabled="True" OnClientShowing="DisplayDateToday" CssClass="cal_Theme1" >

<ProfileBindings>

ProfileBindings>

ajaxToolkit:CalendarExtender>

/* Java Script Code*/

function DisplayDateToday(sender, args)

{

if (sender._selectedDate == null)

{

sender._selectedDate = new Date();

/* For Sunday*/

sender._daysTableHeaderRow.cells[0].style.color = "Red";

for (var i = 0; i < 7; i++

{

sender._daysTable.rows[i].cells[0].style.color = "Red";

}

}

}