ASP.NET Calendar - Knowledge Base

« Back to Knowledge Base list

Add a special date in client-side

Q:

I'd like to set special dates manually on client-side, but there's no such method like addSpecialDate.

A:

Here is an example of how to create such method and use it.

<script type="text/javascript">
  // add a special date to calendar
  function addSpecialDate(calendar, specialDate, specialDateTooltip,
                                         specialDateClass, specialDateClassOver, specialDateUrl) {
     // the date ident in the inner objects
     var dateIndex = specialDate.valueOf();
     // set the inner special objects of the component
     calendar.specialDates[dateIndex] = specialDateTooltip;
     if (typeof specialDateUrl == "undefined") {
        calendar.specialDatesUrls[dateIndex] = "";
     } else {
        calendar.specialDatesUrls[dateIndex] = specialDateUrl;
     }
     if (typeof specialDateClass == "undefined" || specialDateClass == "") {
        calendar.specialDatesStyles[dateIndex] = calendar.styleDaySpecial; // default
     } else {
        calendar.specialDatesStyles[dateIndex] = specialDateClass;
     }
     if (typeof specialDateClassOver == "undefined" || specialDateClassOver == "") {
        calendar.specialDatesStylesOver[dateIndex] = calendar.styleDaySpecialOver; // default
     } else {
        calendar.specialDatesStylesOver[dateIndex] = specialDateClassOver;
     }
     //-------------------------
     // 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); };
  }
</script>
...
<obout:Calendar runat="server" DateFirstMonth="2013/6/1" ID="Calendar1">
    <obout:SpecialDate Year="2013" Month="6" Day="20" ToolTip="Dentist appointment" />
    <obout:SpecialDate Year="2013" Month="6" Day="8" ToolTip="Some tooltip" />
    <obout:SpecialDate Year="-1" Month="7" Day="4" ToolTip="Independence Day"
                                  CSSClass="indepDay" CSSClassOver="indepDayOver" />
    <obout:SpecialDate Year="2013" Month="7" Day="18" ToolTip="A tooltip" />
 </obout:Calendar>
<
script type="text/javascript">
  addSpecialDate(Calendar1, new Date(-1, 6, 25), "July 25 (every year)");
</script>

and you will see: