Dynamic Right click menu content

I tried the following:

const self = this;
            self.contextMenuAllOptions = new DayPilot.Menu({
                items: [
                    {
                        text: Resource.getLabel("cancelBooking"),
                        onclick() { self.cancelBooking(this.source); }
                    },
                    {
                        text: Resource.getLabel("lockBooking"),
                        onclick() { self.lockBooking(this.source); }
                    },
                    {
                        text: Resource.getLabel("addToClipboard"),
                        onclick() { self.addToClipboard(this.source); }
                    }
                ]               
            });
            self.contextMenuNoCancel = new DayPilot.Menu({
                items: [

                    {
                        text: Resource.getLabel("lockBooking"),
                        onclick() { self.lockBooking(this.source); }
                    },
                    {
                        text: Resource.getLabel("addToClipboard"),
                        onclick() { self.addToClipboard(this.source); }
                    }
                ]
            });

and then in the onBeforeEventRender event:

//if (args.data.trans_no > 0) {
            //    args.ContextMenuClientName = this.contextMenuNoCancel.ClientObjectName;
            //}
            //else {
            //    args.ContextMenuClientName = this.contextMenuAllOptions.ClientObjectName;
            //}

If I leave this code uncommented, my events don't even show up.

What do I need to have dynamic options in the menu depending on the event's data content?

Also, I saw this thread https://forums.daypilot.org/question/184/is_it_possible_to_ddd_daypilotmenuitem_items_at_runtime_ but I don't see that property being part of the Menu object. Would it be possible to provide a good example of using different menus depending on some "tags" properties of the event using JavaScript? I looked at several pages of documentation during this weekend as well as few older forum posts and didn't find an example of implementation I can use.

Thanks a lot in advance.

There are two options:

1. You can set the context menu using "contextMenu" property in onBeforeEventRender:

var menu1 = new DayPilot.Menu({ ... });
var menu2 = new DayPilot.Menu({ ... });

// ...
dp.onBeforeEventRender = function(args) {
  if (args.data.trans_no > 0) {
    args.data.contextMenu = menu1;
  }
  else {
    args.data.contextMenu = menu2;
  }
};

See also:
https://api.daypilot.org/daypilot-event-data/

2. You can also modify the menu items and other properties on the fly right before the context menu is displayed using onShow event:

var menu = new DayPilot.Menu({
  items: [ ... ],
  onShow: function(args) {
    var e = args.source;
    if (e.data.trans_no > 0) {
       menu.items[0] = ...
    }
  }
});

See also:
https://api.daypilot.org/daypilot-menu-onshow/

Thanks a lot, I think for our purposes onShow event may be better. I'll take a look at that, hopefully will make it work as our menus are truly dynamic depending on the data.

I checked the example - additional question - what if I don't want to display the menu item at all? How can I remove some of the menu items?