Skip to main content

Initialization

info

Download the DHTMLX Calendar package:

There are two ways of initializing DHTMLX Calendar: inside a container or inside a popup. Both ways are described below in detail.

To use DHTMLX Calendar in your application, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX Calendar</title>         
        <script type="text/javascript" src="../../codebase/calendar.js"></script>
        <link rel="stylesheet" href="../../codebase/calendar.css">
    </head>
    <body>
        <div id="calendar_container"></div>
        <script>
            // creating Calendar 
            const calendar = new dhx.Calendar("calendar_container");
        </script>
    </body>
</html>

Include source files​

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the library into the header of the created file.

If you use DHTMLX Calendar standalone, you need to include JS/CSS files of DHTMLX Calendar:

  • calendar.js
  • calendar.css
index.html
<link type="text/css" href="../codebase/calendar.css">
<script src="../codebase/calendar.js" type="text/javascript"></script>

If you use DHTMLX Calendar as a part of the Suite package, you need to include JS/CSS files of the DHTMLX Suite library:

  • suite.js
  • suite.css
index.html
<link type="text/css" href="../codebase/suite.css">
<script src="../codebase/suite.js" type="text/javascript"></script>

Initialize Calendar​

You can initialize Calendar in a container or in a popup.

Initialization in a container​

In this case you need to add a container for Calendar and give it an id, for example "calendar_container":

index.html
<div id="calendar_container"></div>

and initialize Calendar with the dhx.Calendar object constructor like this:

index.js
// creating Calendar
const calendar = new dhx.Calendar("calendar_container", {
    css: "dhx_widget--bordered",
   // more config options
});

Related sample: Calendar. Initialization

The constructor takes two parameters:

  • the HTML container for Calendar
  • an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default.

Initialization in a popup​

This variant presupposes that you create a popup first and then attach a calendar into it, thus creating a date picker.

Read the details in the DatePicker article.

Configuration properties​

Check the full list of Calendar configuration properties in the Calendar API overview article.

Select initial date (optional)​

You can specify what date should be selected in the calendar before initialization of the component via the value configuration option:

const calendar = new dhx.Calendar("calendar_container", {
    value: new Date(2019,1,10)
});

Related sample: Calendar. Date initialization

If you need to select a specific date after initialization of Calendar, use the setValue() method:

const calendar = new dhx.Calendar("calendar_container", {
    // configuration options
});
calendar.setValue(new Date(2022,1,10));

Related sample: Calendar. Preset selected date