Skip to main content

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, byClick){
    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" />
const 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.

note

The names of events are case-insensitive.

Related sample: Calendar. Events

Detaching event listeners​

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

calendar.events.on("change",function(date, oldDate, byClick){
    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.