Display Context Menu On Touch Device Tap

Asked by Aliaa
7 years ago.

Hi there,

I am trying to display the scheduler event context menu when the user taps on the event from a touch device. I want this behavior to happen only on touch devices (small screens) not on desktop (large screen).

How I implemented this, is by creating an area that covers the whole event and gave it (opacity: 0) to be transparent. This area is only displayed on small screens. I open the context menu in the onClick function. (Note that I tried to set action = "ContextMenu" but it didn't work). This code works fine when testing on desktop (when I decrease the size of the browser). Testing it on an actual touch device doesn't always work. Sometimes the onClick event fires and sometimes it doesn't. I couldn't find a demo that uses an area to open the context menu so that I can test it on a touch device to see if this issue is caused by daypilot scheduler or by my implementation.

Your help is highly appreciated.
Thanks,
Aliaa

how-to javascript

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

Please let me check the issue, I'll get back to you soon.

Comment posted by Aliaa
7 years ago.

Any updates about this?

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

This configuration seems to work fine (on both iOS and Android):

dp.onBeforeEventRender = function(args) {
  args.data.areas = [
      { right: 0, top: 0, left: 0, bottom: 0, action: "ContextMenu"}
  ];
};

This will display the default menu specified using dp.contextMenu. Could you give it a try?

Comment posted by Aliaa
7 years ago.

I have tried it and it is not working at all on the desktop. Note that I set the context menu in OnBeforeEventRender too because I set a different context menu according to the event. And there is another area for copying the event. Also, I make the context menu area visible only on small screens. Here is the code I am using:

OnBeforeEventRender: function (instance, scheduler, args) {
            //Copy Area
            var copyIconAreaStyle = "opacity:0;";
            if (instance.CanCopyEvent(args.data)) {
                copyIconAreaStyle += "cursor:copy;";
            } else {
                copyIconAreaStyle += "cursor:no-drop;";
            }

            var copyIconArea = {
                left: 2,
                top: 2,
                width: 20,
                height: 20,              
                style: copyIconAreaStyle,
                visibility: "Hover",
                css: 'copy-area',
                action: "Move",
                data: "event-copy"
            };

            //Context Menu Area
            var optionsArea = {             
                top: 0,
                left: 0,
                style: "width:100%; height:100%",
                css: 'hidden-md hidden-lg',                
                visibility: "Visible",                
                onClick: function (args) {                    
                    var event = args.source;
                    instance.ShowEventContextMenu(event);               
                },               
                //action: 'ContextMenu'
            };


            args.data.areas = [
                copyIconArea,
                optionsArea
            ];

            //Set Context Menu
            args.e.contextMenu = menus.menuA;
            .
            .
            .
        }

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

There were some inconsistencies in how the context menu is selected for active areas with action: "ContextMenu".

The latest build (2018.4.3472+) now uses the following order when determining the target context menu:

1. area.contextMenu, area.menu (alias)
2. event.data.contextMenu (or args.data.contextMenu, args.e.contextMenu in onBeforeEventRender)
3. DayPilot.Scheduler.contextMenu

That means your code from above should now work (without changes) with the latest sandbox build:

https://javascript.daypilot.org/sandbox/

Please let me know if the problem persists.

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