Work with Calendar

Selecting date

To select a date in a calendar, call the setValue method. The method has one mandatory parameter - a date that should be selected, which is passed as a Date object or as a string.

// selects the current date
calendar.setValue(new Date());
// sets a date as a string

In case a date has been successfully added into the calendar, the method will return true.

Related sample:  Preset selected date - DHTMLX Calendar

Please note that the format of date in the Calendar is defined by the dateFormat option. So, check that you've set the format of date you want to use in the calendar both in the setValue() method and in the dateFormat property. Otherwise, the default format ("%d/%m/%y") will be used.

Getting selected date

To get the selected date, call the getValue method. The method returns selected date either as a string (default) or as a Date object. To get a date as an object, pass the true parameter to the method.

var date1 = calendar.getValue(); // -> "20/08/19"
var date2 = calendar.getValue(true); // -> Tue Aug 20 2019 00:00:00 GMT+0300

Related sample:  Getting selected date - DHTMLX Calendar

Changing calendar mode

You can show a particular date in the calendar and/or open Calendar in a certain mode via the showDate method. It takes two parameters:

  • date - (Date) the date that should be shown in the calendar
  • mode - (string) optional, the mode in which the calendar will be opened

There are the following calendar modes available:

  • "calendar" - allows selecting among days of a month (default)
calendar.showDate(new Date(2020,11,12),"calendar");
  • "month" - allows selecting a month
calendar.showDate(new Date(2020,11,12),"month");
// shows the current month
  • "year" - allows selecting a year
calendar.showDate(new Date(2020,11,12),"year");
// shows the current year

For example, Calendar can be attached to an input, a click on which will show Calendar in one of the modes:

<input type="text" onclick="showCalendar()" />
var calendar = new dhx.Calendar("calendar_container");
function showCalendar(){
    calendar.showDate(new Date(11,11,11),"month");

Related sample:  Showing particular calendar date and mode - DHTMLX Calendar

Linking two calendars

You can create two calendars and link them to provide the ability of selecting a date range. The first calendar will be used for setting the start date of the range, while the end date of the range will be specified in the second calendar.

Date range

Use the link method and pass as a parameter the object of the second calendar to link the first calendar to. In the example below the Change event is intended to output the start and end dates of the selected range:

var calendar = new dhx.Calendar("calendar1", { css: "dhx_calendar--bordered" });
var calendar2 = new dhx.Calendar("calendar2", { css: "dhx_calendar--bordered" });;"change", function (date) {
    document.querySelector("#resultFrom").innerHTML = 
        "Date from: " + calendar.getValue() + "</br>";
});"change", function (date) {
    document.querySelector("#resultTo").innerHTML = 
        "Date to: " + calendar2.getValue() + "</br>";

Related sample:  Date range - DHTMLX Calendar

Showing tooltips

You can add tooltips for dates and show them on the dateHover event. For example, you can add tooltips to mark some special days:

var special_days = {
    "20__8": "Mum's birthday",
    "28__8": "Trip to Canada"
}"DateHover", function(e, date) {
    var key = date.getDate() + "__" + (date.getMonth() + 1);
    if (key in special_days) {
        dhx.tooltip(special_days[key], {node:, position: "bottom"});
Back to top