ASP.NET Calendar - Knowledge Base

« Back to Knowledge Base list

Both 'DayToday' and 'DaySpecial' styles

Q:

When today is a special date then the 'calendarDayToday' class for the cell with this date is overriden by 'calendarDaySpecial' one and the blue background colour disappears. For this case I want the background color be applied from the 'calendarDayToday' class, but all other styles - from the 'calendarDaySpecial' .

A:

By default one CSS class name only can be used with the Calendar.
Here is a code sample how implement two CSS class names, note the !important modifier for the background color styles.

<style type="text/css">
   .myToday
   {
    font:bold 11px Tahoma;
    color:navy;
    text-align:center;padding:1px;
    background-color:#99ccee !important;
    border:1px solid #ECECEE;cursor:pointer; cursor:hand;
   }
   .myTodayOver
   {
    font:bold 11px Tahoma;
    color:navy;
    text-align:center;padding:1px;
    background-color:#99ccee !important;
    border:1px solid #ECECEE;
    cursor:pointer; cursor:hand;
   }
</style>
...
<obout:Calendar runat="server" ID="Calendar1" CSSDayToday="myToday" CSSDayTodayOver="myTodayOver">
    <obout:SpecialDate Year="-1" Month="8" Day="20" ToolTip="special date" />
    <obout:SpecialDate Year="-1" Month="8" Day="22" ToolTip="Special date" />
    <obout:SpecialDate Year="-1" Month="8" Day="23" ToolTip="special date" />
</obout:Calendar>
<
script type="text/javascript">
  function redrawCalendar(calendar) {
     //-------------------------
     // redraw the Calendar
     //-------------------------
     // months from the start
     calendar.lastMonth = calendar.firstMonth;
     calendar.lastYear = calendar.firstYear;
     // the row with the month columns
     var tr = calendar.outerTable.firstChild.firstChild;
     // go throw the months columns
     for (col = 0; col < calendar.cols; col++) {
        var td = tr.cells[col];
        // clear the columh
        while (td.firstChild) {
            td.removeChild(td.firstChild);
        }
        // add a column with month(s)
        td.appendChild(calendar.buildMonthColumn());
        // increment for the next column
        if (calendar.rows == 1) { calendar.incrementMonth(1); }
         else { calendar.incrementMonth(-(calendar.cols * calendar.rows - calendar.cols - 1)); };
     }
     // prepare the last month number and year
     if (calendar.rows == 1) { calendar.incrementMonth(-1); }
     else { calendar.incrementMonth(calendar.cols * calendar.rows - calendar.cols - 1); };
  }
 
   // check whether today is a special date
   var date = Calendar1.dateToday;
   if (typeof (Calendar1.specialDatesStyles[date.valueOf()]) == "undefined") {
      // try to set 'ALL YEARS'
      date.setYear(-1);
   }
   if (typeof (Calendar1.specialDatesStyles[date.valueOf()]) != "undefined") {
      // yea... today is a special date

      // add 'DayToday' class name
      Calendar1.specialDatesStyles[Calendar1.dateToday.valueOf()] += " " + Calendar1.styleDayToday;
      // add 'DayTodayOver' class name
      Calendar1.specialDatesStylesOver[Calendar1.dateToday.valueOf()] += " " + Calendar1.styleDayTodayOver;
      // redraw the calendar to apply modified class names
      redrawCalendar(Calendar1);
   }
</script>

You will see the background color of today for the special date – August 20 :