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

Menu will not display on Mobile

Asked by Stephanie
4 years ago.

I am not able to get the context menu for events to display on my phone....

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

The context menu opens on right mouse click on the desktop. This event either doesn't exist or mapped unreliably to a touch gesture on touch devices.

So the best way to make the context menu accessible on touch devices is to add an active area with action set to "ContextMenu".

Example:

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.Areas.Add(new Area().Right(20).Top(3).Width(15).Height(15).CssClass("event_action_menu").ContextMenu("myMenu"));
}

Where "myMenu" is the client-side id of the context menu (ClientObjectName property).

See also:
https://doc.daypilot.org/calendar/event-active-areas/

Comment posted by Stephanie
4 years ago.

Thanks I will try that. I already have it set so that the left click opens the menu, so I thought that should work for the mobile and seemed to in the past....

Comment posted by Stephanie
4 years ago.

Okay, so I added this to the DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e) method and I am still not getting menu on my phone...

// Mobile Context Menu
e.Areas.Add(new Area().Right(20).Top(3).Width(15).Height(15).CssClass("event_action_menu").ContextMenu(e.ContextMenuClientName));

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

This code will add a 15x15 icon in the upper-right corner of the event. Unless you have ".event_action_menu" defined in your CSS it won't be visible (it's defined in Demo/Themes/areas.css).

1. Try using hard-coded red color to make sure it's visible.
2. Also, add Visible() call to make sure it's permanently visible (not just on hover).
3. You need to use ClientObjectName property of an actual DayPilotMenu object when specifying the context menu action.

e.Areas.Add(new Area().Right(20).Top(3).Width(15).Height(15).BackgroundColor("red").Visible().ContextMenu(DayPilotMenu1.ClientObjectName));

Then it will be possible to activate the context menu by tapping this red icon on your phone.

Comment posted by Stephanie
4 years ago.

Thanks but I am still not getting any red box showing....

Also, we are setting the menu to be used based on different parameters in that method. For example:

e.ContextMenuClientName = dpm_Client.ClientID;

How do I then pass that to this method?

Comment posted by Stephanie
4 years ago.

Okay, sorry I sent that too soon :) I was able to change the width and height to 150 and get a red box. Can I set this 'area' to the entire size of the event without any issues? If so, is there a good way to do that. Or a better way to make this easy to 'touch' on a small mobile device?

It looks like what I was originally passing for the menu name should work.

Comment posted by Stephanie
4 years ago.

I have this somewhat working on the phone. You have to press and hold vs just touch. Any way to change that?

Comment posted by Stephanie
4 years ago.

Any word on this? I have to press and hold to get the menu to show up on the empty times. But even then the menu disappears before you can touch any of the options. How should this work on mobile? What am I missing?

Comment posted by Stephanie
4 years ago.

Any ideas? We are also having issues with the menu showing on right clicking in Safari on the Mac?

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