Skip to main content


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

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

Related sample: Calendar. Basic Initialization

Include source files

Create an HTML file and place full paths to JS and CSS files of dhtmlxCalendar into the header of the created file. The Calendar component can be used standalone or as a part of the Suite library.

If you use dhtmlxCalendar standalone, you need to include 2 files:

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

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

  • suite.js
  • suite.css
<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 initialize Calendar with the dhx.Calendar object constructor. The constructor takes two parameters:

  • the HTML container for Calendar,
<div id="calendar_container"></div>
  • an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default.
// creating dhtmlxCalendar
var calendar = new dhx.Calendar("calendar_container",{
// config options

Related sample: Calendar. Basic Initialization

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.

  • create an input to enter a date into and give it the id "date-input":
<input type="text" id="date-input" style="width: 200px;" readonly/>
  • use corresponding object constructors to create a calendar and a popup objects. Note that in this case null is used instead of container for Calendar:
var calendar = new dhx.Calendar(null, {dateFormat: "%d/%m/%y"});
var popup = new dhx.Popup();
  • attach the calendar to the popup using the method of Popup:
  • use the method of Popup inside a click handler to define that a popup with calendar will open on click in the "date-input" input:
var dateInput = document.getElementById("date-input");
dateInput.addEventListener("click", function() {;
  • define the logic of closing the popup with calendar using the hide() method of Popup. For example, on selecting a new date in the calendar:"change", function() {
dateInput.value = calendar.getValue();

Related sample: Calendar. Date Picker

Configuration properties

The detailed information on Calendar configuration options can be found in the Calendar API overview article.

Select initial date (optional)

You can specify what date should be selected in the calendar both before and after initialization of the component:

  • via the value configuration option:
var calendar = new dhx.Calendar("calendar_container", {
value: new Date(2019,1,10)
var calendar = new dhx.Calendar("calendar_container", {
// configuration options
calendar.setValue(new Date(2019,1,10));

Related sample: Calendar. Preset Selected Date