Event Handling

Attaching event listeners

You can attach event listeners with the calendar.events.on() method of the events module:

calendar.events.on("Change",function(date, oldDate, click){
    console.log("Change selection from "+oldDate+" to "+date);
    console.log(click);
});

For example, Calendar can be attached to an input that will display the date selected in Calendar:

<input type="text" id="date" />
var calendar = new dhx.Calendar("calendar_container");
calendar.events.on("Change",(date)=>{ 
    document.getElementById("date").value = date.getFullYear() +
        "-" + (date.getMonth() + 1) + "-" +date.getDate();
});

Several handlers can be attached to one event, and all of them will be executed.

The names of events are case-insensitive.

Related sample:  Events - DHTMLX Calendar

Detaching event listeners

To detach an event listener, use calendar.events.detach():

calendar.events.on("Change",function(date, oldDate, click){
    console.log("Change selection from "+oldDate+" to "+date);
    console.log(click);
});
calendar.events.detach("Change");

Calling events

To call an event, use calendar.events.fire():

calendar.events.fire("name",args);
// where args is an array of arguments

The list of events

You can find the full list of events in the Calendar API.

Back to top