Context Menu Customization

You can customize the menu dynamically using onShow event handler.

This event handler is called right before the menu is displayed and you can use it to change the items depending on the source object.

Examples

1. You can replace the whole items array with a different set of menu items:

const menuItemsBasic = [
  {
    text: "Open"
  },
  {
    text: "Delete"
  }
];


const menuItemsAdvances = [
  {
    text: "Open"
  },
  {
    text: "Delete"
  },
  {
    text: "Send"
  },
  {
    text: "Reschedule"
  }
];


const menu = new DayPilot.Menu({
  onShow: args => {
    // The `args.source` object holds the calendar event object for calendar event context menu
    // This example assumes the event data object has a custom `type` property.
    const event = args.source;
    args.menu.items = event.data.type == "basic" ? menuItemsBasic: menuItemsAdvanced;
  }
});

2. You can enable/disable selected menu items:

const menu = new DayPilot.Menu({
  items: [
    {
      text: "Open"
    },
    {
      text: "Delete"
    },
  ],
  onShow: args => {
    // The `args.source` object holds the calendar event object for calendar event context menu.
    // This example assumes the event data object has a custom `disabled` property.
    const event = args.source;
    args.menu.items[1].disabled = event.data.disabled;
  }
});

3. You can change the icon depending on the source object status:

const menu = new DayPilot.Menu({
  items: [
    {
      text: "Lock",
      onClick: args => args.source.data.locked = !args.source.data.locked
    },
  ],
  onShow: args => {
    // The `args.source` object holds the calendar event object for calendar event context menu.
    // This example assumes the event data object has a custom `locked` property.
    const event = args.source;
    if (event.data.locked) {
      args.menu.items[0].symbol = "daypilot.svg#checkmark-2";
    }
  }
});