Most of the people like to give a different look and feel to the calendar control. There are two themes for Ajax Calendar. This will help you to modify your calendar view.








/* Start - Calander Styles */
.ajax__calendar_container
{padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;
text-align:center;font-family:tahoma,verdana,helvetica;}
.ajax__calendar_body
{height:139px;width:170px;position:relative;overflow:hidden;margin:auto; }
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years
{top:0px;left:0px;height:139px;width:170px;position:absolute;
text-align:center;margin:auto;}
.ajax__calendar_container TABLE {font-size:11px;}
.ajax__calendar_header {height:20px; background-color:#63B2DB;width:100%;}
.ajax__calendar_prev
{cursor:pointer;width:15px;height:15px;float:left;
background-repeat:no-repeat;background-position:50% 50%;
background-image:
url();}
.ajax__calendar_next
{cursor:pointer;width:15px;height:15px;float:right;
background-repeat:no-repeat;background-position:50% 50%;
background-image:
url();}
.ajax__calendar_title {cursor:pointer;font-weight:bold;}
.ajax__calendar_footer {height:15px; background-color:#63B2DB;}
.ajax__calendar_today {cursor:pointer;padding-top:3px;}
.ajax__calendar_dayname {height:17px;width:18px;text-align:right;padding:0 2px;}
.ajax__calendar_day
{height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
.ajax__calendar_month
{height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar_year
{height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar .ajax__calendar_container
{border:1px solid #646464;background-color:#ffffff;color:#000000;}
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_day
{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_month
{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_year
{background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_day
{background-color:#ffffff;border-color:#ffffff;color:#ffffff;cursor:default;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_month
{background-color:#ffffff;border-color:#ffffff;color:#ffffff;cursor:default;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_year
{background-color:#ffffff;border-color:#ffffff;color:#ffffff;cursor:default;}
.ajax__calendar .ajax__calendar_today .ajax__calendar_day
{background-color:#fff2a8;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_day
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}

/* End - Calander Styles */



This is the second theme and you should use the class name inside the calendar control like this.

.aspx



 



.css



/*Start Cal Theme */
.cal_The .ajax__calendar_container

{
background-color: #63B2DB; border:solid 0px #cccccc;

}

.cal_The .ajax__calendar_header

{
background-color: #63B2DB; margin-bottom: 4px;

}

.cal_The .ajax__calendar_title
{

}

.cal_The .ajax__calendar_next,

.cal_The .ajax__calendar_prev

{
color: #004080; padding-top: 3px;

}

.cal_The .ajax__calendar_body

{
background-color: #FFFFFF; border: solid 1px #cccccc;
/*e9e9e9*/
}

.cal_The .ajax__calendar_dayname

{
text-align:center; font-weight:bold; margin-bottom: 4px; margin-top: 2px;
background-color: #ffffff;
}

.cal_The .ajax__calendar_day

{
text-align:center;

}

.cal_The .ajax__calendar_hover .ajax__calendar_day,

.cal_The .ajax__calendar_hover .ajax__calendar_month,

.cal_The .ajax__calendar_hover .ajax__calendar_year,

.cal_The .ajax__calendar_active

{
color: #004080; font-weight:bold; background-color: #ffffff;

}

.cal_The .ajax__calendar_today

{
font-weight:bold;

}

.cal_The .ajax__calendar_other,

.cal_The .ajax__calendar_hover .ajax__calendar_today,

.cal_The .ajax__calendar_hover .ajax__calendar_title

{
color: #bbbbbb;

}
/*End Cal Theme*/




I have added the simple example for the above style sheet as the Deepak's request.