6. Special Day

NlsCalendar supports special day (mark date as special day) the same way as disable date selection. There are 2 ways to set special day in the calendar:

  1. Manually sets special day in NlsCalendar's dtSpecials property.
  2. Programmatically overrides the specialDates() function.
1. Manually Sets the Special Day

Simply add date with format yyyy-mm-dd (for ex. 2007-10-15) into dtSpecials list to mark it as special day.


      
        //creates the calendar.
        <script>
          var cal=new AOCalendar("cal1");
          cal.opt.themeDir="../themes/default/";
          
          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>
      

As shown in example above, special days are defined in dtSpecials associated array. The array has the following format:

        
        {
          "date string" : "short description",
          "date string" : "short description",
          "date string" : "short description"
        }      
      

Each entry is key:value pair (key and value separated by semicolon(:), and each entry is separated by comma(,). Since it is associated array, it is also accessible using javascript code:

        
        //mark Dec 25, 2007 as special day 
        cal.dtSpecials["2007-12-25"]="Christmas Day";
      

To remove special day from calendar, you can remove the entry from the list or set the value to false.

        
        //remove special day from calendar.
        cal.dtSpecials["2007-12-25"]=false;
        
        //or delete the entry from the array
        delete cal.dtSpecials["2007-12-25"];
      

Also note in the example, you can use wildcard on year, month or date. For example to mark every August 01st as special day, you can use "XXXX-08-01". Wildcard character is "X".



2.Programmatically Set Special Day.

Programmatically sets special day allows you greater control in calculating dates you'd like to mark as special day. It allows you to apply more complex logic for example set period of dates, weekend day as special day, first/last day of month etc.

To programmatically sets special day, simply creates a handler function and assign it to NlsCalendar.specialDates() function. Below is an example to set every Dec 24th to Jan 03rd and first/last Monday of May as special day.


        //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/default/";
          cal2.specialDates=customSpecialDates;
          cal2.render();
        </script>         
      

The specialDates() function is evaluated each time the calendar renders/refreshes. When the function is invoked, a date with format yyyy-mm-dd (for ex. 2007-10-25) is passed into the function. You should evaluate the date value and return non false value for example short description to mark the date as special day or false otherwise.

An important note when using this function is manually specified dates (in dtSpecials property) will be ignored. However you can simply check whether the date is defined in the property by using AOCalendar.getMatch() function. This way you have more control on which method (manual or programmatic) takes precendence. Here below is the example.


        //creates the calendar.
        <script>
          
          function customSpecialDates(d) {

            //check if the date is defined in dtSpecials property.
            var spc = AOCalendar.getMatch(d, this.dtSpecials);
            if(spc) return spc;
            

            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/default/";
          cal2.specialDates=customSpecialDates;
          cal2.render();
        </script>        
      

As shown in the example above, the AOCalendar.getMatch() function requires 2 parameters, the first is the date to check and second is the list of special days which is dtSpecials property.