I am attempting to create an event calendar using the fullcalendar library and followed the demo external-dragging, I understand the concept just wondering how to execute the revert function which if I press cancel the drop event will return to its original position.

I am using the sweetalert2 library replacing the default javascript alert, below is my code.

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month'
            },
            editable: true,
            eventConstraint: {
            start: moment().format('YYYY-MM-DD'),
            end: '2100-01-01' // hard coded goodness unfortunately
            },
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function() {
                // is the "remove after drop" checkbox checked?

                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();

                }

                swal({
                    title: 'Are you sure?',
                    text: "You want to change this event schedule?",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, proceed'
                  }).then(function (result) {
                    if (result.value) {


                      swal(
                        'Success!',
                        'The event schedule was successfully changed to ',
                        'success'
                      )



                    }else{

                      revertFunc();

                    }
                  })
                 //end of drop  

            },

The revertFunc(); is only available on eventDrop but i am clueless how to implement it on drop event, any suggestion would be great

I am attempting to create an event calendar using the fullcalendar library and followed the demo external-dragging, I understand the concept just wondering how to execute the revert function which if I press cancel the drop event will return to its original position.

I am using the sweetalert2 library replacing the default javascript alert, below is my code.

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month'
            },
            editable: true,
            eventConstraint: {
            start: moment().format('YYYY-MM-DD'),
            end: '2100-01-01' // hard coded goodness unfortunately
            },
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function() {
                // is the "remove after drop" checkbox checked?

                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();

                }

                swal({
                    title: 'Are you sure?',
                    text: "You want to change this event schedule?",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, proceed'
                  }).then(function (result) {
                    if (result.value) {


                      swal(
                        'Success!',
                        'The event schedule was successfully changed to ',
                        'success'
                      )



                    }else{

                      revertFunc();

                    }
                  })
                 //end of drop  

            },

The revertFunc(); is only available on eventDrop but i am clueless how to implement it on drop event, any suggestion would be great

• javascript
• jquery
• fullcalendar

Share Improve this question Follow asked Nov 21, 2017 at 7:56 SarotobiSarotobi 84922 gold badges1414 silver badges3434 bronze badges 3

• There is no "revertFunc()" in the "drop" callback. It just doesn't exist. In "eventDrop" (which btw despite the name is related to dragging/dropping already-existing events, not externally-dragged events) it's supplied by fullCalendar as one of the arguments to the function. in the "drop" and "eventReceive" callbacks which relate to external dropping, there is no equivalent concept. You just can't do that at all. – ADyson Commented Nov 21, 2017 at 14:18
• If you want to cancel the event, put your dialog box in the eventReceive function, and if the user presses cancel, call the method to delete the event (since by this point, the event has already been added to the calendar). See this similar answer stackoverflow./a/47175973/5947043 . The conditions for deletion are different, but the basic idea is the same. – ADyson Commented Nov 21, 2017 at 14:20
• @ADyson you also need to restore the original event. My solution was to save it in the LeaveEvent and restore it in the ReceiveEvent – Gianpiero Commented Apr 7, 2020 at 9:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

There is no "revertFunc()" in the "drop" callback. It just doesn't exist.

My workaround (FullCalendar v4) is to manage both EventLeave and EventReceive: in the first one save the original event, in the second one delete the new event and restore the original one.

Here a simplified version:

// to map original events (event.id => event)
_oldEventsInfo = new Map();

eventLeaveHandler(info) {
    _oldEventsInfo.set(info.event.id, info);
}

eventReceiveHandler(info) {
    if (/* for any reason cannot be moved */) {
        this.revert(info);
    } else {
        _oldEventsInfo.delete(info.event.id);
    }
}

revert(info) {
    var oldInfo = _oldEventsInfo.get(info.event.id);
    if (oldInfo) {
        // build a new event to restore in the original calendar
        var oldCalendar = oldInfo.event._calendar;
        var restoredEvent = {
            id: oldInfo.event.id,
            // etc
        };
        oldCal.addEvent(restoredEvent);
        // delete the destination (dragged) event from dest calendar
        info.event._calendar.getEventById(info.event.id).remove();
        // remove the old event from my saved
        _oldEventsInfo.delete(info.event.id);
    }
}

In v5 there is an "revert" function on the eventDrop.

In React you can store this callback as a reference variable

  const revertDropEvent = useRef<() => void>();

  const handleDropEvent = ({ event, revert }: EventDropArg) => {
      revertDropEvent.current = revert;
  }
  
  const handleCancelDrop = () => {
      if (revertDropEvent.current) revertDropEvent.current();
  }

  return (
  <div>
    <FullCalendar
       eventDrop={handleDropEvent}
       /* ... */
    />
    <ConfirmationModal onClose={handleCancelDrop}/>
  </div>

Fullcalendar v6.1.10 with React

If you want to revert position you can use revert function as documentation describe it: https://fullcalendar.io/docs/eventDrop

Eg. ...

    const handleDropEvent = async (e) => {
        try {
            const result = await someFunction(e.event);
            if (!result) {
                e.revert()
            }
        } catch (error) {
            e.revert()
        }
    }

...

<FullCalendar
..
eventDrop={handleDropEvent}
...
/>