Calendar.js - Documentation - Custom Triggers

Below is a list of all the custom triggers supported in Calendar.js, which are fired when specific actions occur.

Download Now

v2.10.13 - 27th Feb 2024
Option Triggers

For Events:

options.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.onEventAdded( event ):

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

options.onEventUpdated( event ):

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

options.onEventRemoved( event ):

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

options.onEventsAdded( events ):

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

options.onEventsUpdated( events ):

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

options.onEventsSet( events ):

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

options.onEventsSetFromJSON( json ):

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

options.onEventsAddedFromJSON( json ):

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

options.onEventsExported( events ):

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

options.onEventsCleared():

Fires when events are cleared.

options.onEventDragStart( event ):

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

options.onEventDragStop( event ):

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

options.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.onEventClick( event ):

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

options.onEventDoubleClick( event ):

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

options.onEventUrlClicked( url ):

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

options.onEventsFetch():

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

options.onEventsImported( events ):

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


For Rendering:

options.onRender( id ):

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

options.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.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.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.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.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.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.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.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.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.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.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.onPreviousMonth( date ):

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

options.onNextMonth( date ):

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

options.onPreviousYear( date ):

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

options.onNextYear( date ):

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

options.onToday():

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

options.onSetDate( date ):

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


For Groups:

options.onGroupsCleared():

Fires when all the groups are cleared from the events.

options.onGroupRemoved( groupName ):

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


For Options:

options.onOptionsUpdated( options ):

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

options.onSearchOptionsUpdated( options ):

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


For DatePicker Mode:

options.onDatePickerDateChanged( date ):

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

options.onDatePickerOpened( id ):

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

options.onDatePickerClosed( id ):

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


For Actions:

options.onFullScreenModeChanged( flag ):

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

options.onDestroy( id ):

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

options.onRefresh():

Fires when the Calendar is refreshed.

options.onBusyStateChange( flag ):

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


For Browser Notifications:

options.onNotificationClicked( event ):

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

options.onNotification( event ):

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


For Visibility Changes:

options.onVisibleGroupsChanged( groupNames ):

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

options.onVisibleEventTypesChanged( eventTypeIds ):

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