NlsCalendar Professional
addobject.com
Disable Dates
NlsCalendar Professional - Advanced Calendar Control
   

You can disable dates in the calendar to prevent user selecting it. NlsCalendar provides 2 options to disable dates:

  • Manually set the disabled date.
  • Programmatically overrides the disabledDates() function.


Manually set the disabled dates.

This following example shows you how to disable dates manually.

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

Date:

  • The example above returns date with format 'month/date/year'.
  • Dates disabled in the calendar:
    • July 23, 2007
    • July 27, 2007
    • August 15, 2007
    • August 04, 2007
    • October 10, 2007
    • November 18, 2007
    • November 26, 2007
    • Every August 2nd.
    • Whole September in 2007.
    • Every 15 of month.
  • The calendar mode is floating (0) which is the default mode.

Example code:


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

                </script>
              


Programmatically overrides the disabledDates() function.

This following example shows you how to disable dates by overriding the disabledDates() function.

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

Date:

  • The example above returns date with format 'month date, year'.
  • Weekend days are all disabled.

Below is the example to disable dates using disabledDates() 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 to disables the date or false to enable it.

Example code:


                //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.opt.dtFormat="$MM $dd, $YY";
                  cal2.disabledDates=disablesWeekend;
                  cal2.render();
                </script>