3. Implementation

This chapter describes how to implement NlsCalendar step by step.

1. Includes Required Script Files and Stylesheet

The main script file nlscalendar.js and language file (for ex. nlscalendar_i18n_en.js) are "must include" files when implementing NlsCalendar. Other script files are optional depends on functionality of calendar you want to implement.

Please note that the language file must be declared first before other scripts include.

  1. lang/nlscalendar_i18n_xx.js, language file. This is a must include file when implementing NlsCalendar.
  2. nlscalendar.js, main NlsCalendar script file. This is a must include file when implementing NlsCalendar.
  3. nlscalendar_picker.js, NlsCalendar as date time picker, include this file only if you use the calendar as date time picker (popup mode).
  4. nlscalendar_util.js, NlsCalendar optional utility functions.
  5. nlscalendarext_ajax.js, NlsCalendar AJAX extension, include this file only if you use AJAX with the calendar.
  6. nlscalendarext_sel.js, NlsCalendar multiple selection extension, include this file only if you enable multiple selection in the calendar.

You also need to include one of the stylesheet from themes folder. Here below is the example code:


      
        <html>
<head>
<title>Implementing NlsCalendar</title>
<link rel="StyleSheet" href="themes/default/nlscalendar.css" type="text/css" />
<script language="javascript" src=" lib/lang/nlscalendar_i18n_en.js"></script>
<script language="javascript" src=" lib/nlscalendar.js"></script>
</head>
</html>

2. Instantiates the Calendar Control

Just copy this following code (please delete the line number), and put it in your page. You can customize it by setting other properties.

      
        1. <script>
        2.   var cal=new AOCalendar("cal1");
        3.   cal.opt.themeDir="themes/default/";
        4.   cal.opt.mode=1; 
        5.   cal.render();  
        6. </script>
      

The calendar id ("cal1" in example above) cannot be number and cannot contains space. For example: ‘1234’ is invalid, ‘cal 1’ is also invalid.

Below is the complete code.


      
        <html>
<head>
<title>Implementing NlsCalendar</title>
<link rel="StyleSheet" href="themes/default/nlscalendar.css" type="text/css" />
<script language="javascript" src=" lib/lang/nlscalendar_i18n_en.js"></script> <script language="javascript" src=" lib/nlscalendar.js"></script> </head>
<body> <script> var cal=new AOCalendar("cal1"); cal.opt.themeDir="themes/default/"; cal.opt.mode=1; cal.render(); </script> </body> </html>

For further detail about NlsCalendar properties/options, please check NlsCalendar Options.


3. Popup Mode (Date Time Picker)

In the example above, the calendar is rendered in flat mode, it is always visible in the page. Very often in web application, you want the calendar poped up to select a date and returns the selected value to a textbox. Below is the example to use the calendar control as date time picker.


        <html>
<head>
<title>Implementing NlsCalendar</title>
<link rel="StyleSheet" href="themes/default/nlscalendar.css" type="text/css" />
<script language="javascript" src=" lib/lang/nlscalendar_i18n_en.js"></script> <script language="javascript" src=" lib/nlscalendar.js"></script> <script language="javascript" src=" lib/nlscalendar_picker.js"></script>
</head>
<body> <script> var cal=new AOCalendar("cal1"); cal.opt.themeDir="themes/default/"; cal.render(); </script> <input type="text" id="dtStart" value=""> <input type="button" value="Pick" onclick="cal.show('SE', this, 'dtStart')"> <br><br> <input type="text" id="dtEnd" value=""> <input type="button" value="Pick" onclick="cal.show('SE', this, 'dtEnd')"> </body> </html>

In the example, the calendar mode is default popup mode (mode=0). There aren't much different with previous example except the mode is default mode and new library is included (nlscalendar_picker.js). The library is required because it defines required functions for date time picker. To show the calendar, use [calendar].show() function. This function has 4 arguments:

  1. dir, direction of popup, possible value is NE, NW, SE, SW.
  2. elm, element that fires the onclick event, in this example is the button.
  3. ctl, id of bound control which is a text field. Selected date will be returned to the bound control.
  4. f, date format, this argument is optional, if omitted, default format will be used ($dm/$dd/$YY, for ex 10/04/2007).

For further information about the function, please check Reference.