4. NlsCalendar Options

Below are list of NlsCalendar properties/options.

4.1 Calendar Mode

NlsCalendar supports 2 modes, flat (calendar is always visible on the page) and popup mode.

         var cal = new NlsCalendar("cal1");
         cal.opt.mode=1;  //1 for flat mode, 0 for popup mode.


Please note that almost all calendar options are exposed through calendar.opt object.

4.2 Theme Directory

Specifies calendar theme directory. The directory contains images/style used by the calendar.

         var cal = new NlsCalendar("cal1");
         cal.opt.themeDir = "themes/default/"; //manual scrolling mode

4.3 First Day of Week

NlsCalendar supports any day as first day of week. Possible value is 0-6. The value 0 is Sunday.

        var cal = new NlsCalendar("cal1");
        cal.opt.firstDayOfWeek=1; //this set first day of week to Monday

4.4 Default Date Format

Specifies default input and output date format. The default value of this property is "$dm/$dd/$YY".

        var cal = new NlsCalendar("cal1");
        cal.opt.dtFormat = "$dd-$dm-$YY"; // ex. 04-11-2007

For further detail about supported date format, please check Reference

4.5 Multiple Selection

Enables/disables multiple date selection. Default value of this property is false.

        <script src="lib/nlscalendar_sel.js"></script>

          var cal = new NlsCalendar("cal1");

You must includes nlscalendar_sel.js when enabling multiple date selection.

4.6 Year Range
Sets year selection period/limit to specific range.

        var cal = new NlsCalendar("cal1");
        cal.opt.yrRange=[1985, 2030];

4.7 Time Selector
Enables/disables time selector. Default value is false.

        var cal = new NlsCalendar("cal1");

4.8 Disable Selection
Disables date selection in the calendar. Default value is false;

        var cal = new NlsCalendar("cal1");

4.9 Selection on Date with Event Only
Enables selection on date with special event attached only. When this property is set to true, only date with special event is selectable. Default value is false.

        var cal = new NlsCalendar("cal1");

4.10 Show Adjacent Dates
Show overlapped dates of previous/upcoming month. The adjacent dates are always disabled. By default, adjacent dates are hidden (not visible).

        var cal = new NlsCalendar("cal1");

4.11 Show/Hide Top Selected Date.
Show/hide the selected date located at top left corner of calendar. Default value of this property is true.

        var cal = new NlsCalendar("cal1");

4.12 Auto Close
Used in popup mode only. If true, the calendar will be closed when user select a date. If false, single click on date will only select the date, to close the popup, user can double click the date or click on Select button. By default this property is true.

        var cal = new NlsCalendar("cal1");

4.13 Auto Update
Used in popup mode (as date time picker) only in combination with autoClose=false option. If this property is true, any changes to the calender will automatically updates the bound control (text field). By default this property is false.

        var cal = new NlsCalendar("cal1");

4.14 Hide Navigation Button
Hide navigation button such as previous/next month/year, today, close and select button.

        var cal = new NlsCalendar("cal1");

        //hide close button

        //hide select button

        //hide prev/next month button

        //hide prev/next year button

        //hide month drop down

        //hide year drop down

        //hide Today button


4.15 zIndex
Use this property to set calendar zIndex. By default the value is 1000.

        var cal = new NlsCalendar("cal1");