EventMenu
Feature

Displays a context menu for events. Items are populated by other features and/or application code.

Default event menu items

Here is the list of menu items provided by the feature and populated by the other features:

Reference	Text	Weight	Feature	Description
`editEvent`	Edit event	100	EventEdit	Edit event in the event editor. Hidden when read-only
`showDetails`	Edit event	100	EventEdit	Show event in a non-editable form. Hidden when not read-only
`copyEvent`	Copy event	110	EventCopyPaste	Copy event or assignment. Hidden when read-only
`cutEvent`	Cut event	120	EventCopyPaste	Cut event or assignment. Hidden when read-only
`unassignEvent`	Unassign event	300	This feature	Unassign event. Hidden when read-only, shown for multi-assignment
`deleteEvent`	Delete event	500	This feature	Remove event. Hidden when read-only
`splitEvent`	Split event	650	Scheduler Pro only	Split an event into two segments at the mouse position
`renameSegment`	Rename segment	660	Scheduler Pro only	Show an inline editor to rename the segment
`eventColor` ¹	Color	400	This feature	Choose background color for the event bar

¹ Set showEventColorPickers to true to enable this item

Customizing the menu items

The menu items in the Event menu can be customized, existing items can be changed or removed, and new items can be added. This is handled using the items config of the feature.

Add extra items for all events:

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            items : {
                extraItem : {
                    text : 'Extra',
                    icon : 'fa fa-fw fa-flag',
                    onItem({eventRecord}) {
                        eventRecord.flagged = true;
                    }
                }
            }
        }
    }
});

Remove existing items:

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            items : {
                deleteEvent   : false,
                unassignEvent : false
            }
        }
    }
});

Customize existing item:

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            items : {
                deleteEvent : {
                    text : 'Delete booking'
                }
            }
        }
    }
});

Manipulate existing items for all events or specific events:

const scheduler = new Scheduler({
    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.

Note that the menuContext is applied to the Menu's item event, so your onItem handler's single event parameter also contains the following properties:

source The Scheduler whose UI was right-clicked.
targetElement The element right-clicked on.
eventRecord The event record clicked on.
resourceRecord The resource record clicked on.
assignmentRecord The assignment record clicked on.

Video guides

@youtube

Full information of the menu customization can be found in the "Customizing the Event menu, the Schedule menu, and the TimeAxisHeader menu" guide.

This feature is enabled by default.

Useful configs and functions

Member	Description
items	Menu items configuration object
eventMenuBeforeShow	Fires before menu is shown
eventMenuItem	Fires when a menu item is clicked
eventMenuShow	Fires after menu is shown

Configs

Configs are options you supply in a configuration object when creating an instance of this class

processItems : Function
A function called before displaying the menu that allows manipulations of its items. Returning false from this function prevents the menu being shown.
```
features         : {
   eventMenu : {
        processItems({ items, eventRecord, assignmentRecord, resourceRecord }) {
            // Add or hide existing items here as needed
            items.myAction = {
                text   : 'Cool action',
                icon   : 'fa fa-fw fa-ban',
                onItem : () => console.log(`Clicked ${eventRecord.name}`),
                weight : 1000 // Move to end
            };

           if (!eventRecord.allowDelete) {
                items.deleteEvent.hidden = true;
            }
        }
    }
},
```
Parameters
- context : Object
  
  An object with information about the menu being shown.
- feature : EventMenu
  
  A reference to this feature.
- domEvent : Event
  
  The initiating event.
- event : Event
  
  DEPRECATED: The initiating event.
- point : Number[]
  
  The client X and Y position of the initiating event.
- targetElement : HTMLElement
  
  The target to which the menu is being applied.
- eventRecord : EventModel
  
  The record representing the current event.
- resourceRecord : ResourceModel
  
  The record representing the current resource.
- assignmentRecord : AssignmentModel
  
  The assignment record.
- items : Object<String, MenuItemEntry>
  
  An object containing the menu item configs keyed by their id.
Returns

Boolean/null
:

Returning false from this function prevents the menu being shown.

Properties

Properties are getters/setters or publicly accessible variables on this class

isEventMenu : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of EventMenu class, or subclass thereof.

menuContext : SchedulerMenuContext

READONLY

An informational object containing contextual information about the last activation of the context menu.
isEventMenu : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of EventMenu class, or subclass thereof.

Functions

Functions are methods available for calling on the class

showContextMenuFor( eventRecord, options )

Shows context menu for the provided event. If record is not rendered (outside of time span/filtered) menu won't appear.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

eventMenuBeforeShow

PREVENTABLE

ON-OWNER

This event fires on the owning Scheduler before the context menu is shown for an event. Allows manipulation of the items to show in the same way as in processItems. Returning false from a listener prevents the menu from being shown.

Note that this event is triggered on the owning widget:
eventMenuItem

ON-OWNER

This event fires on the owning Scheduler when an item is selected in the context menu.

Note that this event is triggered on the owning widget:
eventMenuShow

ON-OWNER

This event fires on the owning Scheduler after showing the context menu for an event

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onEventMenuBeforeShow

PREVENTABLE

ON-OWNER

This handler is called on the owning Scheduler before the context menu is shown for an event. Allows manipulation of the items to show in the same way as in processItems. Returning false from a listener prevents the menu from being shown.

Note that this handler is called on the owning widget:
onEventMenuItem

ON-OWNER

This handler is called on the owning Scheduler when an item is selected in the context menu.

Note that this handler is called on the owning widget:
onEventMenuShow

ON-OWNER

This handler is called on the owning Scheduler after showing the context menu for an event

Note that this handler is called on the owning widget:

Type definitions

SchedulerMenuContext : MenuContext
A context object passed to any processItems method defined for a context menu feature, and the basis of events fired by context menu features.
Properties
- eventRecord : EventModel
  
  The event record clicked on.
- resourceRecord : ResourceModel
  
  The resource record clicked on.
- assignmentRecord : AssignmentModel
  
  The assignment record clicked on.

id: eventMenu

Source path

Scheduler/feature/EventMenu.js

Demo

examples/eventmenu

EventMenu
Feature

Default event menu items

Customizing the menu items

Video guides

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Demo

Inheritance tree5

Mixins2

Contents

EventMenu Feature

Default event menu items

Customizing the menu items

Video guides

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Demo

Inheritance tree5

Mixins2

Contents

EventMenu
Feature