Initialization

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

Download the dhtmlxCalendar package and unpack it into a folder of your project
Include source files
Initialize Calendar with the object constructor
Select initial date (optional)

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxCalendar</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 dhtmlxCalendar 
            var calendar = new dhx.Calendar("calendar_container");
        </script>
    </body>
</html>

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxPopup into the header of the created HTML file. The files are:

calendar.js
calendar.css

<link type="text/css" href="../codebase/calendar.css">
<script src="../codebase/calendar.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.

calendar.html

// creating dhtmlxCalendar
var calendar = new dhx.Calendar("calendar_container",{
   // config options
});

Initialization in a popup

This variant pressupposes that you create a popup first and then attach a calendar into it.

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 attach() method of Popup:

popup.attach(calendar);

use the show() 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() {
    popup.show(dateInput);
});

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:

calendar.events.on("change", function() {
    dateInput.value = calendar.getValue();
    popup.hide();
});

Configuration properties

There is a list of properties that you can specify in the Calendar configuration object (the second parameter of the constructor function):

view - (string) specifies the mode of displaying a calendar: "calendar" (default), "month", "year"
value - (Date) selects a day in a calendar (adds a round blue marker)
date - (Date) defines the date that will be opened when the calendar is created, differs from the selected date (set by value)
css - (string) adds style classes for the component
mark - (function) adds a CSS class to specific days
block - (function) allows disabling some date intervals, day labels are dimmed
weekStart - (string) sets the starting day of the week: "monday" or "sunday" (default)
weekNumbers - (boolean) defines whether to show the numbers of weeks, false by default
timePicker - (boolean) adds a timepicker into a calendar, false by default
timeFormat - (number) defines the time format of a timepicker: 12-hour or 24-hour (12 or 24 (default), correspondingly)
dateFormat - (string) defines the format of dates in the calendar, "%d/%m/%y" by default
hideOtherMonth - (boolean) hides dates of the previous/next months relative to the currently displayed one
width - (string) sets the width of the calendar, "250px" by default

The detailed information on configuration options can be found in the Configuration 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:

calendar.html

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

with the help of the setValue() method:

calendar.html

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