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.

// selects the current date
calendar.setValue(new Date());

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

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

Changing calendar mode

You can open Calendar in different modes via the show() method. There are three calendar modes available:

  • "calendar" - allows selecting among days of a month (default)
calendar.show(new Date(2020,11,12),"calendar");
  • "month" - allows selecting a month
calendar.show(new Date(2020,11,12),"month");
 
// shows the current month
calendar.show(null,"month");
  • "year" - allows selecting a year
calendar.show(new Date(2020,11,12),"year");
 
// shows the current year
calendar.show(null,"year");
  • "timepicker" - allows showing calendar in the timepicker mode
calendar.show(null,"timepicker");

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.show(new Date(11,11,11),"month");
};

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. 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" });
 
calendar.link(calendar2);
 
calendar.events.on("change", function (date) {
    document.querySelector("#resultFrom").innerHTML = 
        "Date from: " + calendar.getValue() + "</br>";
});
 
calendar2.events.on("change", function (date) {
    document.querySelector("#resultTo").innerHTML = 
        "Date to: " + calendar2.getValue() + "</br>";
});

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"
}
 
calendar.events.on("DateHover", function(e, date) {
    var key = date.getDate() + "__" + (date.getMonth() + 1);
    if (key in special_days) {
        dhx.tooltip(special_days[key], {node: e.target, position: "bottom"});
    }
});
Back to top