Custom Context Menu

You can handle onEventRightClick event and use it to open your own context menu:

dp.onEventRightClick = function(args) {
  args.preventDefault();  
  var e = args.e;  // DayPilot.Event object
  // open the context menu
}

You can use args.preventDefault() to cancel the default action. The default action is specified using eventRightClickHandling property (see https://api.daypilot.org/daypilot-scheduler-eventrightclickhandling/). It's not necessary to cancel the default action unless you use the builtin context menu and specify contextMenu property (https://api.daypilot.org/daypilot-scheduler-contextmenu/).

Hi Dan,

Thanks for your reply. I actually tried to do this before but it didn't work. Let me further explain the issue.

1. My context menu is attaching the contextmenu event to the document.
2. Daypilot scheduler is attaching it to the event dom element.
3. If I prevent the default action in onEventRightClick , the event won't bubble to the document, the event won't fire and my context menu won't show.
4. And if I tried calling eventElement.trigger('contextmenu'), this would keep calling onEventRightClick causing an infinite loop.
5. I could get my context menu to appear if I attached it to an element higher in the dom (e.g body) but this is not what I want. I want it to be triggered on events only

So, what I am looking for is to cancel the handling of the contextmenu event completely from daypilot. Can this be done?

DayPilot always handles the "contextmenu" DOM event and doesn't let it bubble - that would display the default browser context menu.

The best way would be to open your context menu manually by calling its API from onEventRightClick, without relying on the "contextmenu" DOM event.

If your context menu doesn't allow that, you can use onAfterEventRender event handler and attach the context menu to args.div.firstChild (that is the *_event_inner div).

Thanks Dan, but It will never work with the way the context menu plugin I am using and daypilot scheduler are designed. The only chance is by having 'None' option for eventRightClickHandling which simply doesn't handle this event for cases like mine.

p.s In case you want to check this yourself, the context menu plugin I am using is http://swisnl.github.io/jQuery-contextMenu/index.html

Have you tried the onAfterEventRender approach? This way you'll get access to the inner div and you can bind your events to it. It will be fired before it bubbles to the main event div which is used internally for all event handlers.

It didn't work because the contextmenu event is attached to the document. This is how the context menu plugin is designed. Calling preventDefault() would stop the propagation to document.

OK, and have you tried to open the context menu manually using its API?
https://swisnl.github.io/jQuery-contextMenu/docs/plugin-commands.html#manually-show-a-contextmenu

Yes, I did. Check below the code from context menu js file that is responsible for opening the menu. All it does is triggering the 'contextmenu' event

$.fn.contextMenu = function(operation) {
if (operation === undefined) {
this.first().trigger('contextmenu');
} else if (operation.x && operation.y) {
this.first().trigger($.Event("contextmenu", {pageX: operation.x, pageY: operation.y}));
}

.
.
.

return this;
};

I see. Unfortunately, it's not possible to let the contextmenu event bubble through all levels inside DayPilot Scheduler. It's handled at multiple levels with different logic.

What is really missing in the context menu is the option to open the context menu directly without relying on the ability of event to bubble through all levels. You can try to extend it - op.show function seems to provide this functionality.

Thanks. I'll look into that.