Skip to main content

Initialization

info

Download the DHTMLX Calendar package:

You can initialize DHTMLX Calendar in two ways: inside a container or inside a popup.

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 your project folder.

After that, create an HTML file and add full paths to the library JS and CSS files in its header.

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​

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 you do not pass this argument to the constructor, Calendar uses the default settings.

Initialization in a popup​

To create a date picker, create a popup first and then attach Calendar to it.

Read the details in the DatePicker article.

Configuration properties​

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

Select an initial date (optional)​

Use the value configuration option to select a date before you initialize the component:

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 you initialize 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

Need more help?Contact Support