Right-click/long press in eventcalendar

Event calendars & schedulers
1

Is right-click/long-press of a calendar cell supported on iPhone?
In my case it’s not working on iPhone, but it is working on Android.

I understand the “contextmenu” event is not supported,
but I wonder if there are workarounds or maybe a solution in mobiscroll?

2

Hi @Marcel_Overdijk :wave:

Yes, on a touch screen (regardless of the OS), the built-in way to create events is by using a long tap + optional drag.

I assume you are trying to create a new event with a long tap, right?

Feel free to share more information about the use case.

3

Hi @Zsombor , thanks for reaching out.

We are trying to use the mobiscroll cell click events like:

const options: MbscEventcalendarOptions = {
    // other options
    onCellClick: (args: MbscCellClickEvent, inst: EventcalendarBase) => {
        // show a custom toast with additional information about the cell/event.
    },
    onCellRightClick: (args: MbscCellClickEvent, inst: EventcalendarBase) => {
        // open a custom context menu popup with actions for the cell/event.
    },
};

I’ve omitted the code for the actual cell click handlers for simplicity.

Both onCellClick and onCellRightClick events work on desktop and on Android.

On iPhone only the onCellClick works, but the onCellRightClick not unfortunately.

4

or is there another way to trigger long tap on ios using mobiscroll?

5

Hi @Marcel_Overdijk

It’s a bit tricky. On touch screens the onCellRightClick is firing on long-tap if dragToCreate is disabled (false). I do not know exactly if it behaves the same on iPhones. As a workaround you could use the onEventDragStart event. Note that dragToCreate must be enabled. I’ve returned false in the onEventCreate method and added a cssClass in the extendDefaultEvent to hide it from css. Here is a small example (I’ve used React):

 <Eventcalendar
     dragToCreate={true}
     onEventDragStart={(args, inst) => {
         //your logic goes here
         console.log(args, inst);
     }}
     extendDefaultEvent={() => ({
        cssClass: 'my-new',
     })}
     onEventCreate={() => false}
 />

And the css to hide the new event:

.my-new {
  display: none;
}

Let me know if this helps!

6

Thx Istvan,
We will try this in January after we are back from holidays.
I will keep you posted.