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.12.0 - 5th Jun 2024
Option Triggers

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.