Customizing the Event, Schedule, and TimeAxis header menus

Bryntum Scheduler ships with built-in context menus for the locked grid cells and column headers, for events, and for the schedule zone and its header. All the context menu features are customizable. The Scheduler is built upon the Grid, so customization of the Cell menu and the Header menu can be found in the Grid docs.

Customization of the Event menu, the Schedule menu, and the TimeAxisHeader menu are similar to the context menus in Grid. and you will find more details about it in this guide.

Right-click an event, the schedule zone behind the event which is called "TimeAxis", and the header of the TimeAxis in the demo below to see it in action:

The menus can be customized, turned off or replaced with your own implementation (see the "Replace context menus" guide).

Turning the menus off entirely

The menus are supplied by corresponding features: EventMenu feature provides menu for events, ScheduleMenu feature provides menu for the schedule zone, TimeAxisHeaderMenu feature provides menu for the header of the schedule zone. These features are enabled by default. To turn a feature off, configure it with false:

const scheduler = new Scheduler({
    features : {
        // Turn the Event menu off completely, will not be created
        eventMenu : false,
        // Turn the Schedule menu off completely, will not be created
        scheduleMenu : false,
        // Turn the TimeAxis Header menu off completely, will not be created
        timeAxisHeaderMenu : false
    }
});

Enabling or disabling the menus

You can also enable or disable any of the provided menus programmatically, perhaps depending on user rights:

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            // The Event menu is created, but starts disabled
            disabled : true
        },
        scheduleMenu : {
            // The Schedule menu is created, but starts disabled
            disabled : true
        },
        timeAxisHeaderMenu : {
            // The TimeAxis Header menu is created, but starts disabled
            disabled : true
        }
    }
});

// To enable
scheduler.features.eventMenu.disabled = false;
scheduler.features.scheduleMenu.disabled = false;
scheduler.features.timeAxisHeaderMenu.disabled = false;

// To disable again
scheduler.features.eventMenu.disabled = true;
scheduler.features.scheduleMenu.disabled = true;
scheduler.features.timeAxisHeaderMenu.disabled = true;

Try it in the demo below:

Customizing the menu items

The menu items in the Event menu, in the Schedule menu, and in the TimeAxis Header 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 features.

Default event menu items

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

Default scheduler zone menu items

The ScheduleMenu feature provides only one item:

Default timeaxis header menu items

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

>

first level of submenu

Removing default items

To remove a default item no matter if it is provided by a context menu feature, or it is provided by another feature, configure it as false in the items config of the context menu feature:

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            items : {
                // Remove "Edit event" item provided by EventEdit feature
                editEvent : false
            }
        },
        scheduleMenu : {
            items : {
                // Remove "Add event" default item
                addEvent : false
            }
        },
        timeAxisHeaderMenu : {
            items : {
                // Remove "Filter tasks" item provided by EventFilter feature
                eventsFilter : false
            }
        }
    }
});

Removing subitems of the TimeAxis Header Menu is not supported.

Customize default items

The default items can be customized by supplying config objects for them in the items config of the menu feature. These config objects will be merged with their default configs. Similar to removing default items, it does not matter, if the item is provided by the menu feature or not.

The order of the default items is determined by the weight property. The higher the weight, the further down they are displayed. See the table above for the default weights.

For example, to rename the "Date range" item and move it above the "Zoom" item:

const scheduler = new Scheduler({
    features : {
        timeAxisHeaderMenu : {
            items : {
                // Rename and move "Date range" item to be above "Zoom" item (200)
                dateRange    : {
                    text   : 'Start/End',
                    weight : 190
                }
            }
        }
    }
});

Try it out in this demo:

Add custom items

Custom items are added in the same way as you customize the built-in ones, add new properties to the items config of the menu feature to add new items. The key you choose to use for your item will be used as its ref, through which it can be accessed later.

Here we add a custom item to the event menu to move the selected task 1 hour forward:

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            items : {
                // Custom reference to the new menu item
                moveForward : {
                    text   : 'Move 1 hour ahead',
                    cls    : 'b-separator', // Add a visual line above the item
                    weight : 400, // Add the item to the bottom
                    onItem : ({ eventRecord }) => {
                        eventRecord.shift(1, 'hour');
                    }
                }
            }
        }
    }
});

Try new custom items here:

Runtime control of menu item visibility

If you need to control menu item visibility or text depending on a dynamic condition, for example user access rights, you can mutate items in the processItems hook provided by the menu.

Here we disable "Edit event", "Delete event", "Unassign event", and "Add event" items based on a condition:

let accessGranted = false;

const scheduler = new Scheduler({
    features : {
        eventMenu   : {
            // Process event items before showing the menu
            processItems({ items }) {
                // Not possible to edit, delete, or change event assignments if there are no rights for it
                if (!accessGranted) {
                    items.editEvent = false;
                    items.deleteEvent = false;
                    items.unassignEvent = false;
                }
            }
        },
        scheduleMenu : {
            // Process schedule zone items before showing the menu
            processItems({ items }) {
                // Not possible to add new events if there are no rights for it
                if (!accessGranted) {
                    items.addEvent = false;
                }
            }
        }
    }
});

See it in action in this demo: