EventMenu
A feature which shows a context menu when right-clicking events in the calendar.
There are three predefined items provided by default:
deleteEventDelete the event clicked upon.editEventEdit the event clicked upon Only present if the EventEdit feature is present (which it is by default).duplicateDuplicate the event clicked upon with the same time and duration, the same resource(s) assigned and a slightly edited name -"<old name> (copy)".
Event menu
//<code-header>
fiddle.title = 'Event menu';
//</code-header>
const calendar = new Calendar({
appendTo : targetElement,
height : 700,
// We have a little less width in our context, so reduce the responsive breakpoints
responsive : {
small : {
when : 480
},
medium : {
when : 640
}
},
// Start life looking at this date
date : '2023-10-01',
sidebar : false,
events : [{
id : 1,
name : 'Meeting',
startDate : new Date(2023, 9, 4, 10),
duration : 2,
durationUnit : 'h'
}],
resources : [
{
id : 1,
name : 'Bob'
},
{
id : 2,
name : 'Kim'
}
],
// Features named by the properties are included.
// An object is used to configure the feature.
features : {
eventMenu : {
items : {
deleteEvent : false,
postpone : {
text : 'Postpone 1h',
weight : 200,
icon : 'fa fa-fw fa-arrow-down',
onItem({ item, eventRecord }) {
eventRecord.shift(1, 'h');
}
}
}
}
},
// Modes are the views available in the Calendar.
// An object is used to configure the view.
modes : {
agenda : null,
year : null,
week : {
dayStartTime : 8
},
day : {
dayStartTime : 8
}
}
});The items set can be reconfigured by providing an items property to this feature:
const calendar = new Calendar({
features : {
eventMenu : {
items : {
// Removes the predefined deleteEvent item
deleteEvent : null,
// Add our own custom item
postpone : {
text : 'Postpone 1h',
weight : 300,
icon : 'fa fa-fw fa-arrow-down',
onItem({ item, eventRecord }) {
eventRecord.shift(1, 'h');
}
}
}
}
}
});
Items may also be reconfigured dynamically at run time:
const calendar = new Calendar({
features : {
eventMenu : {
// Process items before menu is shown
processItems({eventRecord, items}) {
// Push an extra item for conferences
if (eventRecord.type === 'conference') {
items.showSessionItem = {
text : 'Show sessions',
onItem({eventRecord}) {
// ...
}
};
}
// Do not show menu for secret events
if (eventRecord.type === 'secret') {
return false;
}
}
}
}
});
The
processItems implementation may be an async function which awaits a result to mutate the items object.This feature is enabled by default.
Configs
18
Configs
18Other
items: Object<String, MenuItemEntry>
This is a preconfigured set of items used to create the default context menu. The default options are listed at the top of the page.
To remove existing items, set corresponding keys null:
const calendar = new Calendar({
features : {
eventMenu : {
items : {
deleteEvent : null,
duplicate : null
}
}
}
});
See the feature config in the above example for more details.
triggerEvent: contextmenu | click | dblclick | null
An event which is used to show event menu. The available values for it are
contextmenu, click and dblclick. If no value is specified,
default value is used from contextMenuTriggerEvent
const calendar = new Calendar({
features : {
eventMenu : {
triggerEvent : 'click'
}
}
});
clickTriggerSelectorContextMenuBase
keyMapContextMenuBase
menuContextMenuBase
namedItemsContextMenuBase
preventNativeMenuContextMenuBase
processItemsEventMenu
typeContextMenuBase
Misc
bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
Properties
20
Properties
20Common
disabledInstancePlugin
Class hierarchy
Identifies an object as an instance of EventMenu class, or subclass thereof.
Identifies an object as an instance of EventMenu class, or subclass thereof.
isContextMenuBaseContextMenuBase
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable
isTimeSpanMenuBaseTimeSpanMenuBase
Functions
30
Functions
30Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
doDisableInstancePlugin
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Other
addListenerEvents
hasListenerEvents
onEvents
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resumeEventsEvents
showContextMenuContextMenuBase
showContextMenuForEventMenu
suspendEventsEvents
triggerEvents
unEvents
Events
10
Events
10beforeDestroyEvents
catchAllEvents
contextMenuItemContextMenuBase
contextMenuToggleItemContextMenuBase
destroyEvents
disableInstancePlugin
enableInstancePlugin
eventMenuBeforeShowEventMenu
eventMenuItemEventMenu
eventMenuShowEventMenu
Event handlers
10
Event handlers
10onBeforeDestroyEvents
onCatchAllEvents
onContextMenuItemContextMenuBase
onContextMenuToggleItemContextMenuBase
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin
onEventMenuBeforeShowEventMenu
onEventMenuItemEventMenu
onEventMenuShowEventMenu
Typedefs
4
Typedefs
4BryntumListenerConfigEvents
MenuContextContextMenuBase
MenuItemEntryContextMenuBase
SchedulerMenuContextEventMenu