EventMenu

A feature which shows a context menu when right-clicking events in the calendar.

There are three predefined items provided by default:

  • deleteEvent Delete the event clicked upon.
  • editEvent Edit the event clicked upon Only present if the EventEdit feature is present (which it is by default).
  • duplicate Duplicate 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

Common

disabledInstancePlugin
listenersEvents

Other

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

clientInstancePlugin
localeClassLocalizable
localizableLocalizable

Properties

20

Common

disabledInstancePlugin

Class hierarchy

isEventMenu: Boolean= truereadonly
Identifies an object as an instance of EventMenu class, or subclass thereof.
isEventMenu: Boolean= truereadonlystatic
Identifies an object as an instance of EventMenu class, or subclass thereof.
isContextMenuBaseContextMenuBase
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable
isTimeSpanMenuBaseTimeSpanMenuBase

Lifecycle

configBase

Misc

clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

menuContextMenuBase
menuContextEventMenu
preventNativeMenuContextMenuBase

Functions

30

Configuration

applyDefaultsstaticBase

Events

Lifecycle

destroystaticBase

Misc

doDisableInstancePlugin
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

LstaticLocalizable
onEvents
relayAllEvents
showContextMenuContextMenuBase
triggerEvents
unEvents

Events

10
catchAllEvents
contextMenuItemContextMenuBase
contextMenuToggleItemContextMenuBase
destroyEvents
disableInstancePlugin
enableInstancePlugin
eventMenuItemEventMenu
eventMenuShowEventMenu

Event handlers

10
onContextMenuItemContextMenuBase
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

4
MenuContextContextMenuBase
MenuItemEntryContextMenuBase