Different style for the days disabled with the EnabledDateExpression
Q:
Some days are disabled because they are in the week but not in the month.
The days of the past month or the next month, and these disabled days have the CSS calendarDayDisabled style.
But how to apply a different CSS disabled style to the days I disable with the EnabledDateExpression property and a javascript function ?
A:
Here is the code sample:
<style type="text/css">
/* class for dates disabled with the EnabledDateExpression property */
.calendarDayDisabledDefault_2
{
font:11px Tahoma;
color:blue;text-align:center;
padding:1px;border:1px solid #F6F6F6;
}
</style>
<script type="text/javascript" >
function ValidateDate(calendar) {
// if 'changeStyle' method is not overridden
if (typeof calendar.changeStyle_Original != "function") {
// save the original method
calendar.changeStyle_Original = calendar.changeStyle;
// override it
calendar.changeStyle = function (element, clsName) {
if (this._My_Flag) { // day disabled with EnabledDateExpression
// use our second class name
calendar.changeStyle_Original(element, "calendarDayDisabledDefault_2");
} else {
calendar.changeStyle_Original(element, clsName); // use as always
}
};
}
// if 'SetMouseOverEvent' method is not overridden
if (typeof calendar.SetMouseOverEvent_Original != "function") {
// save the original method
calendar.SetMouseOverEvent_Original = calendar.SetMouseOverEvent;
// override it
calendar.SetMouseOverEvent = function (obj, empty, data, style, styleOver) {
if (this._My_Flag) { // day disabled with EnabledDateExpression
// reset the flag
this._My_Flag = false;
return; // nothing to do
}
// use as always
calendar.SetMouseOverEvent_Original(obj, empty, data, style, styleOver);
};
}
// test the date
var currentDate = calendar.currentDate;
// even days only
if (currentDate.getDate() % 2 != 0) {
// notify the 'changeStyle' and 'SetMouseOverEvent' methods - day disabled
calendar._My_Flag = true;
return false;
}
return true;
}
</script>
...
<obout:Calendar runat="server" EnabledDateExpression="ValidateDate(this)" />
You will see the disabled days with the EnabledDateExpression property in blue color:
|