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

How can I open context menu in Calendar configDay view?

Asked by Akhtar Raza
6 months ago.

I added the calendar configDay view for mobile view. Below is my code. I'm creating a mobile version of my ERP.
My question is
1. How can I open the context menu in calendar configDay view or in any view.
2. How can open the context menu in mobile using tap and hold? I used eventTapAndHoldHandling but not working.

configDay: any = {
contextMenu: new DayPilot.Menu({
        onShow: args => {     
          args.menu.items = [
            {
              text: "Blue",
              icon: "icon icon-blue",
              tags: { color: "#1155cc" },
              onClick: args => {  }
            },
            {
              text: "Green",
              icon: "icon icon-green",
              tags: { color: "#6aa84f" },
            },
          ]
        },
      }),
};
Comment posted by Akhtar Raza
6 months ago.

I'm looking for this without and with active area. Because I have to open the context menu in both ways. Like first time creating the event and the second time editing the event using the context menu.

Comment posted by Akhtar Raza
6 months ago.

Context Menu open issue is resolved. Just I need to open in mobile. Help me to open the context menu on mobile.

Answer posted by Dan Letecky [DayPilot]
6 months ago.

1. On touch/mobile devices, you can open the event context menu using the standard two-finger tap gesture. If you use eventTapAndHoldHandling: "ContextMenu" you can open the context menu using tap-and-hold gesture. However, that will disable event moving because normally this gesture is used to activate the moving mode.

See also:
https://doc.daypilot.org/calendar/touch-devices/

2. You can open a context menu for a time range selection using onTimeRangeSelected event. If the selection stays active (you don't clear it using clearSelection() method), you can invoke it again on the selection using a two-finger tap.

Example:

  config: DayPilot.CalendarConfig = {
    viewType: "Week",
    onTimeRangeSelected: async (args) => {
      this.calendar.control.contextMenuSelection?.show(args);
    },
    contextMenu: new DayPilot.Menu({
      items: [
        {text: "Edit...", onClick: args => DayPilot.Modal.alert("Edit")}
      ]
    }),
    contextMenuSelection: new DayPilot.Menu({
      items: [
        {text: "Create...", onClick: args => DayPilot.Modal.alert("Edit")}
      ]
    }),
    eventTapAndHoldHandling: "ContextMenu",
  };
Comment posted by Akhtar Raza
6 months ago.

Thank You,
It works But it works on single finger press and It opens all-time whenever I press finger. Can I do it with a double tap or a long press?

Comment posted by Akhtar Raza
6 months ago.

Any solution for this.

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

Unfortunately, the time range selection can only work with a single tap at the moment.

Comment posted by Akhtar Raza
6 months ago.

Thank You for your response.

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