5. Disable Dates

NlsCalendar supports disable date selection on specific date to prevent user selecting it. There are 2 ways to disable date selection:

  1. Manually disable date selection in NlsCalendar's dtDisabled property.
  2. Programmatically overrides the disabledDates() function.
1. Manually Disable Date Selection

Simply add date with format yyyy-mm-dd (for ex. 2007-10-15) into dtDisabled list to disable selection on particular date.



        //creates the calendar.
        <script>
          var cal=new AOCalendar("cal1");
          cal.opt.opt.themeDir="../themes/default/";
          
          cal.dtDisabled={
            "2007-02-23": true,
            "2007-02-27": true,
            "2007-03-15": true,
            "2007-04-04": true,
            "2007-05-10": true,
            "2007-06-18": true,
            "2007-07-26": true,
            "XXXX-08-02": true, //disable every August 2nd.
            "2007-09-XX": true  //disable all dates in September 2007
          }
          
          cal.render();
        </script>
      

As shown in example above, disabled dates are defined in dtDisabled associated array. The array has the following format:


        {
          "date string" : true/false,
          "date string" : true/false,
          "date string" : true/false...
        }
      

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:


        //disable selection on Dec 25, 2007
        cal.dtDisabled["2007-12-25"]=true;
      

To re-enable a disabled date, you can remove the entry from the list or set the value to false.


        //enable selection on Dec 25, 2007
        cal.dtDisabled["2007-12-25"]=false;

        //or delete the entry from the array
        delete cal.dtDisabled["2007-12-25"];
      

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



2.Programmatically Disables Date.

Programmatically disables date allow you more control in calculating dates you'd like to disable. It allows you to apply more complex logic for example disables period of dates, disables weekend only, first/last day of month etc.

To programmatically disables date, simply creates a handler function and assign it to NlsCalendar.disabledDates() function. Below is an example to disable selection on weekend.


        //creates the calendar.
        <script>
          
          function disablesWeekend(d) {
            var dt=AOCalendar.parseDate(d, "$YY-$dm-$dd");
            var day=dt.getDay();
            if(day==0 || day==6) {
              return true;
            }
            return false;
          }
          

          var cal2=new AOCalendar("cal2");
          cal2.opt.themeDir="../themes/default/";
          cal2.disabledDates=disablesWeekend;
          cal2.render();
        </script>
      

The disabledDates() 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 true to disable the date or false otherwise.

An important note when using this function is manually specified dates (in dtDisabled 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 disablesWeekend(d) {

            //check if the date is defined in dtDisabled property.
            if (AOCalendar.getMatch(d, this.dtDisabled)) return true;

            var dt=AOCalendar.parseDate(d, "$YY-$dm-$dd");
            var day=dt.getDay();
            if(day==0 || day==6) {
              return true;
            }
            return false;
          }
          

          var cal2=new AOCalendar("cal2");
          cal2.opt.themeDir="../themes/default/";
          cal2.disabledDates=disablesWeekend;
          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 disabled dates (dtDisabled property).


Below is another example to disable selection on dates that are passed.


        //creates the calendar.
        <script>
          
          var today = new Date();
          function disablePassedDates(d) {
            if(d < today.$ao_key()) return true;
            return false;
          }
          
          var cal2=new AOCalendar("cal2");
          cal2.opt.themeDir="../themes/default/";
          cal2.disabledDates=disablePassedDates;
          cal2.render();

        </script>