NlsCalendar Professional
addobject.com
Special Days
NlsCalendar Professional - Advanced Calendar Control
   

You can set certain dates in the calendar as special day. NlsCalendar provides 2 options to set special day:

  • Manually sets the special days.
  • Programmatically overrides the specialDates() function.


Manually sets the special days.

This following example shows you how to sets special days manually.

Click on the "Pick" button to shows the calendar.

Date:

  • The example above returns date with format 'month/date/year'.
  • Mouse over the special day will displays special day's notes.
  • Special days in the calendar:
    • Every January 1st
    • February 18, 2007
    • March 15, 2007
    • April 06, 2007
    • May 17, 2007
    • June 01, 2007
    • Every August 17
    • Every December 25
  • The calendar mode is floating (0) which is the default mode.
  • The initial date is set to January 15, 2007.

Example code:


                //creates the calendar.
                <script>
                  var cal=new AOCalendar("cal1");
                  cal.opt.themeDir="../themes/graphics/";
                  cal.opt.dtFormat="$dm/$dd/$YY";
                  cal.opt.topSelDate=false;
                  cal.dtSpecials={
                    "XXXX-01-01": "New Year",
                    "2007-02-18": "Chinese New Year",
                    "2007-03-15": "Seclusion Day",
                    "2007-04-06": "Good Friday",
                    "2007-05-17": "Ascension Day of Jesus Christ",
                    "2007-06-01": "Birthday Anniversay of Buddha",
                    "XXXX-08-17": "Independence Day",
                    "XXXX-12-25": "Christmas Day"
                  }
                  cal.render();
                </script>
              

Programmatically overrides the specialDates() function.

This following example shows you how to sets special days by overriding the specialDates() function.

Click on the "Pick" button to shows the calendar.

Date:

  • The example above returns date with format 'month date, year'.
  • Mouse over the special day will displays special day's notes.
  • Every December 24-January 03 are special day.
  • First and last Monday of May are special day.

Below are the codes to set special days specialDates() function. This function is invoked in calendar rendering process. The only parameter to this function is date string in format 'year-month-date'. The function should return true or non null/false value if it is a special day, and returns null or false if it is not a special day.

Example code:


                //creates the calendar.
                <script>
                  function customSpecialDates(d) {
                    var dt=AOCalendar.parseDate(d, "$YY-$dm-$dd");

                    //annual collective leave, Dec 24 - January 03
                    var cMonth=dt.getMonth();
                    var cDate=dt.getDate();
                    if(cMonth==11 && cDate>=24 || cMonth==0 && cDate<=3) { //11=december, 0=January
                      return "Collective Leave";
                    }


                    if(cMonth==4) {
                       //first Monday in May.
                      var firstMonday=AOCalendar.getDateOfFirst(1, dt);
                      if (AOCalendar.compareDate(firstMonday, dt)==0) {
                        return "May Day Holiday";
                      }
                       //last Monday in May
                      var lastMonday=AOCalendar.getDateOfLast(1, dt);
                      if (AOCalendar.compareDate(lastMonday, dt)==0) {
                        return "Memorial Day";
                      }
                    }
                    return false;
                  }

                  var cal2=new AOCalendar("cal2");
                  cal2.opt.themeDir="../themes/graphics/";
                  cal2.opt.dtFormat="$MM $dd, $YY";
                  cal2.opt.topSelDate=false;
                  cal2.specialDates=customSpecialDates;
                  cal2.render();
                </script>