ScheduleMenu
Feature

Displays a context menu for empty parts of the schedule. Items are populated in the first place by configurations of this Feature, then by other features and/or application code.

Default scheduler zone menu items

The Scheduler menu feature provides only one item:

Reference	Text	Weight	Feature	Description
`addEvent`	Add event	100	This feature	Add new event at the target time and resource. Hidden when read-only
`pasteEvent`	Paste event	110	EventCopyPaste	Paste event at the target time and resource. Hidden when is read-only
`splitSchedule`	Split	200	Split	Shows the "Split schedule" sub-menu
> `splitHorizontally`	Horizontally	100	Split	Split horizontally
> `splitVertically`	Vertically	200	Split	Split vertically
> `splitBoth`	Both	300	Split	Split both ways
`unsplitSchedule`	Split	210	Split	Unsplit a previously split schedule

>: first level of submenu

Customizing the menu items

The menu items in the Scheduler 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 item:

const scheduler = new Scheduler({
    features : {
        scheduleMenu : {
            items : {
                extraItem : {
                    text : 'Extra',
                    icon : 'fa fa-fw fa-flag',
                    onItem({date, resourceRecord, items}) {
                        // Custom date based action
                    }
                }
            }
        }
    }
});

Remove existing item:

const scheduler = new Scheduler({
    features : {
        scheduleMenu : {
            items : {
                addEvent : false
            }
        }
    }
});

Customize existing item:

const scheduler = new Scheduler({
    features : {
        scheduleMenu : {
            items : {
                addEvent : {
                    text : 'Create new booking'
                }
            }
        }
    }
});

Manipulate existing items:

const scheduler = new Scheduler({
    features : {
        scheduleMenu : {
            // Process items before menu is shown
            processItems({date, resourceRecord, items}) {
                 // Add an extra item for ancient times
                 if (date < new Date(2018, 11, 17)) {
                     items.modernize = {
                         text : 'Modernize',
                         ontItem({ date }) {
                             // Custom date based action
                         }
                     };
                 }

                 // Do not show menu for Sundays
                 if (date.getDay() === 0) {
                     return false;
                 }
            }
        }
    }
});

The `processItems` implementation my be an `async` function which `awaits` a result to mutate the `items` object.

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
scheduleMenuBeforeShow	Fires before menu is shown
scheduleMenuItem	Fires when a menu item is clicked
scheduleMenuShow	Fires after menu is shown

Configs

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

items : Object<String, MenuItemEntry>
This is a preconfigured set of items used to create the default context menu.

The items provided by this feature are listed below. These are the predefined property names which you may configure:
- addEvent Add an event for at the resource and time indicated by the contextmenu event.
To remove existing items, set corresponding keys null:
```
const scheduler = new Scheduler({
    features : {
        scheduleMenu : {
            items : {
                addEvent : null
            }
        }
    }
});
```
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         : {
   scheduleMenu : {
        processItems({ items, date, resourceRecord }) {
           // Add or hide existing items here as needed
           items.myAction = {
               text   : 'Cool action',
               icon   : 'fa fa-cat',
               onItem : () => console.log(`Clicked on ${resourceRecord.name} at ${date}`),
               weight : 1000 // Move to end
           };

           if (!resourceRecord.allowAdd) {
               items.addEvent.hidden = true;
           }
       }
   }
},
```
Parameters
- context : Object
  
  An object with information about the menu being shown
- feature : ScheduleMenu
  
  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.
- resourceRecord : ResourceModel
  
  The record representing the current resource
- date : Date
  
  The clicked date
- 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

isScheduleMenu : Booleantrue

READONLY

static

ADVANCED

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

isScheduleMenu : Booleantrue

READONLY

ADVANCED

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

Events

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

scheduleMenuBeforeShow

PREVENTABLE

ON-OWNER

This event fires on the owning Scheduler or Gantt widget before the context menu is shown for the schedule. 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:
scheduleMenuItem

ON-OWNER

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

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

ON-OWNER

This event fires on the owning Scheduler or Gantt widget after showing the context menu for the schedule.

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

onScheduleMenuBeforeShow

PREVENTABLE

ON-OWNER

This handler is called on the owning Scheduler or Gantt widget before the context menu is shown for the schedule. 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:
onScheduleMenuItem

ON-OWNER

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

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

ON-OWNER

This handler is called on the owning Scheduler or Gantt widget after showing the context menu for the schedule.

Note that this handler is called on the owning widget:

id: scheduleMenu

Source path

Scheduler/feature/ScheduleMenu.js

Demo

examples/basic

ScheduleMenu
Feature

Default scheduler zone menu items

Customizing the menu items

Video guides

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Source path

Demo

Inheritance tree5

Mixins2

Contents

ScheduleMenu Feature

Default scheduler zone menu items

Customizing the menu items

Video guides

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Source path

Demo

Inheritance tree5

Mixins2

Contents

ScheduleMenu
Feature