How can I reset a dragged event to its original position on some condition in fullcallendar

Question

I am working on fullCalendar. I want to implement something like this:

• After dragging and dropping an event, a popup shows
• If we cancel the event it needs to go back to its previous position

But the issue I am facing is that I am not able to find a way to return event back to its original position after dragging.

I am thinking to store the start dragging position and store also store the drop position. But I don't know if it is the right why to do that. Is there is any built in feature to do that or set the event back?

import React, { useState, useRef, useEffect } from "react";
import FullCalendar from "@fullcalendar/react"; // must go before plugins
import dayGridPlugin from "@fullcalendar/daygrid"; // a plugin!
import interactionPlugin, { Draggable } from "@fullcalendar/interaction"; // needed for dayClick
import timeGridPlugin from "@fullcalendar/timegrid";
import { resources } from "./records/resources";
import { events } from "./records/events";
import { Col, Row } from "react-bootstrap";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
import "bootstrap/dist/css/bootstrap.css";
import { AlertBox } from "./atertBox";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

function App() {
const [tableState, setTableState] = useState(events);
const [show, setShow] = useState(false);
const [showModal, setShowModal] = useState(false);
const dateRef = useRef();

const addEvent = (e) => {
    const newEvent = {
      id: tableState.length + 1,
      title: e.target.title.value,
      start: e.target.startdate.value + ":00+00:00",
      end: e.target.enddate.value + ":00+00:00",
      resourceId: "d",
      // resourceEditable: false, to Preventing shifting between resources
    };

    setTableState((prev) => {
    console.log(...prev);
    console.log();
    console.log(newEvent);

    return [...prev, newEvent];
  });

  e.preventDefault();
};

const handleDateClick = (arg) => {
    console.log("Arg", arg.dateStr);
};

const saveRecord = (record) => {
    var today = new Date(record);
    // var dd = String(today.getDate()).padStart(2, "0");
    // var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
    // var yyyy = today.getFullYear();
    // today = yyyy + "-" + mm + "-" + dd;
    console.log(today, "today");

    dateRef.current = { today };

    setShow(true);
};

const injectwithButton = (args) => {
    return (
    <div>
        <button onClick={() => saveRecord(args.date)}>
        {args.dayNumberText}
        </button>
    </div>
    );
};

useEffect(() => {
    let draggableEl = document.getElementById("external-events");
    new Draggable(draggableEl, {
    itemSelector: ".fc-event",
    minDistance: 5,
    eventData: function (eventEl) {
        console.log("drag element ", eventEl);
        let title = eventEl.getAttribute("title");
        let id = eventEl.getAttribute("data");
        return {
          title: title,
          id: id,
        };
    },
  });
}, []);

const eventClicked = (event) => {
  console.log("event",event)
};

return (
    <div className="animated fadeIn p-4 demo-app">
    <Row>
        <Col lg={3} sm={3} md={3}>
        <div
            id="external-events"
            style={{
              padding: "10px",
              width: "20%",
              height: "auto",
            }}
        >
        <p align="center">
            <strong> Events</strong>
        </p>
        {events.map((event, index) => (
            <div
                className="fc-event"
                title={event.title}
                data={event.id}
                key={index}
            >
                {event.title}
            </div>
        ))}
        </div>
        </Col>

        <Col lg={9} sm={9} md={9}>
        <div className="demo-app-calendar" id="mycalendartest">
            <FullCalendar
            plugins={[
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin,
                resourceTimelinePlugin,
            ]}
            initialView="resourceTimeline"
            headerToolbar={{
                left: "today,prev,next",
                center: "title",
                right:
                "new dayGridMonth,timeGridWeek,timeGridDay,resourceTimeline",
            }}
            customButtons={{
                new: {
                text: "add new event",
                click: (e) => setShow(true),
                },
            }}
            eventColor="grey"
            nowIndicator={true}
            events={tableState}
            resources={resources}
            dateClick={handleDateClick}
            eventClick={eventClicked}
            editable={true}
            eventDragStart={(e) => console.log("ee", e)}
            eventDrop={(drop) => {
                console.log("drop", drop.oldEvent._instance.range);
                console.log("drop", drop.oldEvent._def.publicId);
            }}
            eventResizableFromStart={true}
            eventResize={(resize) => console.log("resize", resize)}
            dayCellContent={injectwithButton}
            schedulerLicenseKey="CC-Attribution-NonCommercial-NoDerivatives"
            droppable={true}
            // eventReceive={(e) => {
            //   console.log("receive", e);
            //   console.log("receive", e.event._instance.range);
            // }}
            drop={(drop) => {
                console.log("external drop", drop);
            }}
            />
        </div>
        </Col>
    </Row>
    </div>
  );
}

export default App;

Answer 1

If you're talking about dragging an existing calendar event to a new position, then eventDrop provides a revert callback which, if called, will send the event back to its previous position.

If you're talking about dragging an external event onto the calendar, eventReceive provides a revert callback which, if called, will reverse the action and the event will not be dropped onto the calendar.