Cancel Event Drag&Drop using ESC-Key

Event calendars & schedulers
1

Hi,

Is it possible to cancel the drag and drop process by pressing the ESC key? I can intercept the KeyDown event. It’s just unclear to me how I can get the event calendar to end the drag and drop state and display the appointment at its old time again.

I’m using mobiscroll/react 5.25.1

Regards
Sven

2

Hi,
Can you give more details about the context? Why would you need to use the ESC key to cancel the drag and drop process? I am asking you in order to understand the real-world use-case and to find a solution for your case.

Thanks

3

Hi,

Our user story looks like this: The user starts to drag and drop the appointment (scrolling horizontally and/or vertically if necessary) and then realizes that no suitable location can be found. Then he should be able to cancel the rescheduling of the appointment using the ESC key.

Is this use case really that unusual? And can I achieve the desired behavior (cancelling the movement) in another way?

Greetings

4

Thank you for the details!
There is no built-in functionality for this. A possible solution would be to trigger a mousedown event in your keydown listener. Something like:

  const [esc, setEsc] = useState(false);
  const escFunction = (e) => {
    if (e.key === 'Escape') {
      var event = new Event('mouseup');
      document.dispatchEvent(event);
      setEsc(true);
    }
  };
  document.addEventListener('keydown', escFunction, false);

Then pass the following function to the calendar’s onEventUpdate prop:

const update = useCallback(() => {
    if (esc) {
      setEsc(false);
      // returning false prevents the event update
      return false;
    }
  }, [esc, setEsc]);

Let me know what you think.

5

OK. Thank you. I will give it a try

6

Hi,

it works very well.
However, a small adjustment was still necessary. setEsc(true) should be called BEFORE calling dispatchEvent.

Thanks :slight_smile:

7

Hi, you’re welcome! Glad to hear it helped :wink: