Ajax Control ToolKit – Style the invalid date for Calendar extender

The September 2011 release introduces “Date ranges” for Calendar extender control. It is a little surprise that the Css classes to style the out of range dates are not listed in the official website.

I did some search on the web but it returns not relevant results. So I decided to have a look at the css style generated by the control itself and I have found the missing style Css classes for the out of range date.

The name is “.ajax__calendar .ajax__calendar_invalid” and it has four child classes listed below:

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_day {}

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_month {}

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_year {}

.ajax__calendar .ajax__calendar_invalid .ajax__calendar_today {}

If using the following styles:

.calendar .ajax__calendar_invalid

{

    background-color: #FFFFFF;

    text-decoration: line-through;

    color: #C0C0C0;
}

The calendar looks like:

If you need set the day, month and year view individually, you have to set the relevant child class.