ASP.NET Calendar - Knowledge Base

« Back to Knowledge Base list

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: