customizing context menu with click/touch

Asked by Vincent
15 days ago.

I’m trying to see if I can have a context menu come up on screen touch and mouse right click only(mouse left click would just trigger some other code). This code doesn’t really seem to be working, however.

var menuA = new DayPilot.Menu({
  //menu items here
});

dp.onEventClick = function(args) {
   var touched = !!args.originalEvent.changedTouches;
   if (touched) {
      menuA.show(args.e, touched);
   }
   else { 
       //do something else
   }
};

I am also wondering if it would be possible to pass information from the onEventClick event to the context menu’s onShow event, as to hide/show certain different menu options based on whether the user touched the event or right clicked the event.

For example, if the user touched the event on the screen, I’d like to show in my menu an extra option for “view event”(which would also be the default behavior when I left click with the mouse).

how-to javascript

Comment posted by Dan Letecky [DayPilot]
12 days ago.

Sorry for the delay!

Which component do you use (Calendar, Scheduler..)?

> I am also wondering if it would be possible to pass information from the onEventClick event to the context menu’s onShow event, as to hide/show certain different menu options based on whether the user touched the event or right clicked the event.

You can pass a custom object to the context menu as a parameter of the show() method. It can be the event object but if you want to pass more data, you can create a custom object with additional fields:

menuA.show({
  event: args.e, 
  mydata: "value",
  // ...
});

Comment posted by Vincent
12 days ago.

I’m currently using the scheduler and this code did let me pass a custom object to the menu, which created the desired behavior of being able to hide certain items, but it seems to be causing issues with the onClick event of those menu items when that custom object is being passed to the menu. Still trying to troubleshoot it.

Comment posted by Vincent
7 days ago.

Still haven’t found an fix to the issue. The menu loads up fine from the touch event with the code above in the onEventClick, but I’m getting an error when I touch the menu item from that dynamic menu. “msg: Uncaught TypeError: Cannot read properties of underfined (reading ‘internal’)” error. Is there something different with the way the event is passed with touches?

Comment posted by Dan Letecky [DayPilot]
6 days ago.

Sorry, when passing a custom object to the context menu, it is necessary to add a reference to the source component using the calendar property:

menuA.show({
  event: args.e, 
  calendar: dp,
  mydata: "value",
  // ...
});

customizing context menu with click/touch

Products

Learn

Get Support

DayPilot Pro