Documentation

Custom Triggers

Explore the complete list of custom triggers supported in Calendar.js. These event hooks are activated by specific user actions, helping developers extend functionality, automate workflows, and build interactive calendar experiences.

Example

calendarInstance.setOptions( {
    events: {
        onBeforeEventAddEdit: ( event ) => { }
    }
} );

For Events

options.events.onBeforeEventAddEdit( event ):

Fires when an event is about to be added/edited via the Event Editor dialog (stops the Event Editor dialog opening).
Parameter: event: ‘Event’ - The event details (if being edited).

options.events.onEventAdded( event ):

Fires when an event is added.
Parameter: event: ‘Event’ - The event details.

options.events.onEventUpdated( event ):

Fires when an event is updated.
Parameter: event: ‘Event’ - The event details.

options.events.onEventRemoved( event ):

Fires when an event is removed.
Parameter: event: ‘Event’ - The event details.

options.events.onEventsAdded( events ):

Fires when events are added.
Parameter: events: ‘Event[]’ - The array of events.

options.events.onEventsUpdated( events ):

Fires when events are updated.
Parameter: events: ‘Event[]’ - The array of events.

options.events.onEventsSet( events ):

Fires when events are set (all other events are cleared).
Parameter: events: ‘Event[]’ - The array of events.

options.events.onEventsSetFromJSON( json ):

Fires when events are set from JSON (all other events are cleared).
Parameter: json: ‘string’ - The JSON.

options.events.onEventsAddedFromJSON( json ):

Fires when events are added from JSON.
Parameter: json: ‘string’ - The JSON.

options.events.onEventsExported( events ):

Fires when events are exported.
Parameter: events: ‘Event[]’ - The array of events.

options.events.onEventsCleared():

Fires when events are cleared.

options.events.onEventDragStart( event ):

Fires when dragging an event is started.
Parameter: event: ‘Event’ - The event details.

options.events.onEventDragStop( event ):

Fires when dragging an event is stopped.
Parameter: event: ‘Event’ - The event details.

options.events.onEventDragDrop( event, targetDate ):

Fires when an event that was dragged is dropped on a date.
Parameter: event: ‘Event’ - The event details.
Parameter: targetDate: ‘Object’ - The date the event was dropped on.

options.events.onEventClick( event ):

Fires when an event is clicked.
Parameter: event: ‘Event’ - The event details.

options.events.onEventDoubleClick( event ):

Fires when an event is double-clicked (only enabled when Editing Mode is disabled).
Parameter: event: ‘Event’ - The event details.

options.events.onEventUrlClicked( url ):

Fires when an event URL is clicked.
Parameter: url: ‘string’ - The URL clicked.

options.events.onEventsFetch():

Fires when the calendar refreshes (it will pull an array of events to add, or update).
Returns: ‘Event[]’ - An array of event.

options.events.onEventsImported( events ):

Fires when events are imported.
Parameter: events: ‘Event[]’ - The array of events.

For Rendering

options.events.onRender( id ):

Fires when the Calendar is rendered.
Parameter: id: ‘string’ - The ID of the Calendar.

options.events.onFullDayEventRender( element, event ):

Fires when the Full Day view renders an event.
Parameter: element: ‘Object’ - The events DOM element that has been added.
Parameter: event: ‘Event’ - The event details.
Returns: ‘boolean’ - States if this event has been custom rendered.

options.events.onFullWeekEventRender( element, event ):

Fires when the Full Week view renders an event.
Parameter: element: ‘Object’ - The events DOM element that has been added.
Parameter: event: ‘Event’ - The event details.
Returns: ‘boolean’ - States if this event has been custom rendered.

options.events.onFullMonthEventRender( element, event ):

Fires when the Full Month view (default) renders an event.
Parameter: element: ‘Object’ - The events DOM element that has been added.
Parameter: event: ‘Event’ - The event details.
Returns: ‘boolean’ - States if this event has been custom rendered.

options.events.onAllEventsEventRender( element, event ):

Fires when the All Events view renders an event.
Parameter: element: ‘Object’ - The events DOM element that has been added.
Parameter: event: ‘Event’ - The event details.
Returns: ‘boolean’ - States if this event has been custom rendered.

options.events.onTimelineEventRender( element, event ):

Fires when the Timeline view renders an event.
Parameter: element: ‘Object’ - The events DOM element that has been added.
Parameter: event: ‘Event’ - The event details.
Returns: ‘boolean’ - States if this event has been custom rendered.

options.events.onWidgetEventRender( element, event ):

Fires when the Widget mode renders an event.
Parameter: element: ‘Object’ - The events DOM element that has been added.
Parameter: event: ‘Event’ - The event details.
Returns: ‘boolean’ - States if this event has been custom rendered.

options.events.onToolTipEventRender( tooltip, event ):

Fires when a tooltip is rendered for an event.
Parameter: tooltip: ‘Object’ - The tooltip DOM element that has been shown.
Parameter: event: ‘Event’ - The event details.
Returns: ‘boolean’ - States if this tooltip has been custom rendered.

options.events.onFullDayTitleRender( dateTime ):

Fires when the Full Day view renders its title.
Parameter: dateTime: ‘Object’ - The Date and Time being displayed.
Returns: ‘boolean’ - States if the title has been custom rendered.

options.events.onFullWeekTitleRender( weekStartDateTime, weekStartEndTime ):

Fires when the Full Week view renders its title.
Parameter: weekStartDateTime: ‘Object’ - The Date and Time being displayed for the start of the end.
Parameter: weekStartEndTime: ‘Object’ - The Date and Time being displayed for the end of the week.
Returns: ‘boolean’ - States if the title has been custom rendered.

options.events.onTimelineTitleRender( dateTime ):

Fires when the Timeline view renders its title.
Parameter: dateTime: ‘Object’ - The Date and Time being displayed.
Returns: ‘boolean’ - States if the title has been custom rendered.

options.events.onFullMonthPinUpRender( pinup, date ):

Fires when the Full Month pin-up is rendered after a month/year change.
Parameter: pinup: ‘Object’ - The pinup DOM element that has been shown.
Parameter: date: ‘Object’ - The Date being displayed.
Returns: ‘boolean’ - States if the pin-up area has been custom rendered.

For The Display Date

options.events.onPreviousMonth( date ):

Fires when the calendar moves to the previous month.
Parameter: date: ‘Object’ - The new display date.

options.events.onNextMonth( date ):

Fires when the calendar moves to the next month.
Parameter: date: ‘Object’ - The new display date.

options.events.onPreviousYear( date ):

Fires when the calendar moves to the previous year.
Parameter: date: ‘Object’ - The new display date.

options.events.onNextYear( date ):

Fires when the calendar moves to the next year.
Parameter: date: ‘Object’ - The new display date.

options.events.onToday():

Fires when the calendar is moved to today’s date.

options.events.onSetDate( date ):

Fires when the calendar date is set manually.
Parameter: date: ‘Object’ - The new display date.

For Groups

options.events.onGroupsCleared():

Fires when all the groups are cleared from the events.

options.events.onGroupRemoved( groupName ):

Fires when a specific group is removed.
Parameter: groupName: ‘string’ - The name of the group.

For Options

options.events.onOptionsUpdated( options ):

Fires when the configurable options are updated.
Parameter: options: ‘Options’ - The options.events.

options.events.onSearchOptionsUpdated( options ):

Fires when the configurable search options are updated.
Parameter: options: ‘Search’ - The options.events.

For DatePicker Mode

options.events.onDatePickerDateChanged( date ):

Fires when the DatePicker moves to a specific date.
Parameter: date: ‘Object’ - The new display date.

options.events.onDatePickerOpened( id ):

Fires when the DatePicker is opened.
Parameter: id: ‘string’ - The ID of the DatePicker.

options.events.onDatePickerClosed( id ):

Fires when the DatePicker is closed.
Parameter: id: ‘string’ - The ID of the DatePicker.

For Actions

options.events.onFullScreenModeChanged( flag ):

Fires when the full-screen mode is changed.
Parameter: flag: ‘boolean’ - States if full-screen mode is on.

options.events.onDestroy( id ):

Fires when the Calendar is destroyed.
Parameter: id: ‘string’ - The ID of the Calendar.

options.events.onRefresh():

Fires when the Calendar is refreshed.

options.events.onBusyStateChange( flag ):

Fires when the busy state changes.
Parameter: flag: ‘boolean’ - The flag that states if the calendar is busy.

For Browser Notifications

options.events.onNotificationClicked( event ):

Fires when a browser notification is clicked for an event.
Parameter: event: ‘Event’ - The event details.

options.events.onNotification( event ):

Fires when a browser notification is shown for an event.
Parameter: event: ‘Event’ - The event details.

For Changes

options.events.onVisibleGroupsChanged( groupNames ):

Fires when the visible groups are changed.
Parameter: groupNames: ‘string[]’ - The visible group names.

options.events.onVisibleEventTypesChanged( eventTypeIds ):

Fires when the visible groups are changed.
Parameter: eventTypeIds: ‘number[]’ - The visible event type IDs.

options.events.onViewChange( viewName ):

Fires when the current view is changed.
Parameter: viewName: ‘string’ - The name ID of the view currently being displayed.