Initialization of dhtmlxCalendar

To use dhtmlxCalendar in your application you should make 3 steps:

Download the 'dhtmlxCalendar' or 'dhtmlxSuite' package and unpack it into a folder.
Include to your html file the related CSS and JS files.
Call an object constructor.

Included files (steps 1, 2)

Each DHTMLX component can be used standalone or as a part of the general library.

If you use dhtmlxCalendar standalone you need to include 3 files:

dhtmlxcalendar.js
dhtmlxcalendar.css

dhtmlxcalendar_dhx_skyblue.css

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="../codebase/dhtmlxcalendar.css">
      <link rel="stylesheet" type="text/css" href="../codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
      <script src="../codebase/dhtmlxcalendar.js"></script>
  </head>
 <body>
 ...
 </body>
</html>

If you use dhtmlxCalendar as a part of 'dhtmlxSuite' package you need to include 2 files:

dhtmlx.js

dhtmlx.css

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

Initialization (step 3)

There are 6 ways to initialize dhtmlxCalendar on the page.

Way of initialization	Code	Image
Initialization in a div	<div id="box" style="position:relative;height:250px;"></div> <script> var myCalendar = new dhtmlXCalendarObject("box"); var myCalendar.show(); </script>
Attaching to an input	<input type="text" id="calendar"> <input type="text" id="calendar2"> <script> var myCalendar = new dhtmlXCalendarObject(["calendar","calendar2"]); </script>
Attaching to an input with an icon	<input type="text" id="calendar_input"> <span><img id="calendar_icon" src="../common/calendar.gif" border="0"></span> <script> var myCalendar = new dhtmlXCalendarObject({input: "calendar_input", button: "calendar_icon"}); </script>
Attaching to a custom icon	<span><img id="calendar_icon" src="../common/calendar.gif" border="0"></span> <span id="date_here"> </span> <script> var myCalendar = new dhtmlXCalendarObject({button: "calendar_icon"}); </script>
Using inside dhtmlxForm	formData = [ {type: "calendar", label: "Start Date", skin: "dhx_skyblue", dateFormat: "%Y-%m-%d %H:%i", enableTime: true}, {type: "calendar", label: "End Date", skin: "dhx_skyblue", dateFormat: "%Y-%m-%d"} ]; myForm = new dhtmlXForm("myForm", formData);
Using inside dhtmlxToolbar	myToolbar = new dhtmlXToolbarObject("toolbarObj"); myToolbar.loadXML("../common/dhxtoolbar_data.xml?"+new Date().getTime(), function(){ myToolbar.addInput("calendar", null, "12.06.2013", 90); myCalendar = new dhtmlXCalendarObject(myToolbar.getInput("calendar")); myCalendar.setDateFormat("%d.%m.%Y"); });