dhtmlxcalendar:initialization_of_dhtmlxcalendar [Skin test wiki]

- Initialization of dhtmlxCalendar

Index

dhtmlxcalendar

Initialization of dhtmlxCalendar

The following ways of initialization are available for users of dhtmlxCalendar:

Minimal Initialization;
Extended Initialization;
Calendar Linked to Input;
Double Calendar.

First things that need to be done for any type of dhtmlxCalendar's initialization are the following:

Download the dhtmlxCalendar package from the server and place it in a folder;
Create an html file;
Place the full paths to dhtmlxCalendar's CSS and JS files into the header of the created html file.

    <head>   
      <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxcalendar.css">
        <script src="[full path to this file]/dhtmlxcommon.js"></script>
        <script src="[full path to this file]/dhtmlxcalendar.js"></script>
        <script>window.dhx_globalImgPath="[full path to this directory]/codebase/imgs/";</script> 
//  a global JS variable used to set the full path to the directory, where Calendar image files are located   
    </head>

Minimal Initialization

Now the user needs to create an object where dhtmlxCalendar will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:

  <div id="objId"></div>

The next step is to create a new dhtmlxCalendarObject and place it after the <div> element (object) that we've just created:

  <script>
      mCal = new dhtmlxCalendarObject("objId",true);
  </script>

The parameters the user should indicate are:

objId - id of the object inside which the Calendar will be created;
true|false - forces|or not immediate rendering of the calendar.

And the last command that should be called in order to initialize the Calendar is as follows:

  <script>
      mCal.draw();
  </script>

When the page is loaded, the calendar will be displayed on page with the current date highlighted in it.

Note: When initializing the Calendar, the user should decide whether to render it through the second parameter of the constructor (set to true), or with the help of draw() method.

Extended Initialization

Creating a Calendar with extended initialization, the user should call the same commands described in Minimal initialization .

The code for extended initialization looks like this:

    <script>
        mCal = new dhtmlxCalendarObject("objId", false, {name_of_the_option: parameter});   
        mCal.draw();
    </script>

The third parameter of the constructor allows the user to activate different options of the Calendar:

isYearEditable:true|false - allows the user to input the year directly from the keyboard;
yearsRange:([from,to]) - allows the set the range of years (array [from,to]);
isMonthEditable:(true|false) - allows the user to input the month directly from the keyboard;
isWinHeader:(frue|false)- renders the header with buttons (close, maximize/minimize, set current date) and “Calendar header” label;
headerButtons: “XMT” - allows header buttons with buttons close (X), maximize/minimize (M), set current date (T);
isWinDrag:(frue|false) - allows drag of the calendar if set to true (and if isWinHeader is also set to true).

If the user intends to set several of the above mentioned options at once, he should write them all (as the third parameter of the constructor) and separate them by commas (,).

Calendar Linked to Input

There is also the possibility to create a Calendar linked to an input on page. First, the user should create the input itself, for example:

  <input type="text" id="calInput1" class="css1" readonly="true">

And then, one line of code creates the Calendar and links in to the newly created input:

  <script>
      mCal = new dhtmlxCalendarObject("calInput1");   
      mCal.draw();
  </script>

The Calendar appears by input select. When the user selects some date in the Calendar, the selected date will be set as value of the input, then the Calendar will be closed.

dhtmlxCalendar can be initialized like a double calendar in order to be used for selecting a date range. Like with initialization of a simple Calendar, the user needs to create an object on page where the component will be placed.

Then a new dhtmlxDblCalendarObject should be created:

  <div id="objId"></div>
  <script>
      mDCal = new dhtmlxDblCalendarObject("objId", true);
      mDCal.draw();
  </script>

The date range can be easily set with the help of setDate() method that takes the following parameters:

dateFrom - here the starting range date should be indicated;
dateTo - the ending date of the range.

  <script>
      mDCal.setDate(dateFrom,dateTo);
  </script>

The left calendar highlights the starting range date while the right calendar indicates the ending range date.

One more possibility of setting a date range in the dthmlxCalendar component is described in Setting Date Range section.

Initialization of dhtmlxCalendar

Minimal Initialization

Extended Initialization

Calendar Linked to Input

Double Calendar