search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Custom Context Menu

Asked by Aliaa
2 years ago.

Hi,

I need to add my own context menu to daypilot scheduler. I want to use the standard context menu I use everywhere else in my application not the context menu that comes with daypilot. I checked the options for the context menu but I still couldn't figure out how to do it. Your help is highly appreciated.

Answer posted by Dan Letecky [DayPilot]
2 years ago.

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/).

Comment posted by Aliaa
2 years ago.

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?

Comment posted by Dan Letecky [DayPilot]
2 years ago.

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).

Comment posted by Aliaa
2 years ago.

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

Comment posted by Dan Letecky [DayPilot]
2 years ago.

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.

Comment posted by Aliaa
2 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

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

Comment posted by Aliaa
2 years ago.

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;
};

Comment posted by Dan Letecky [DayPilot]
2 years ago.

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.

Comment posted by Aliaa
2 years ago.

Thanks. I'll look into that.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.