React-big-calendar with drag&drop

Question

I am developing an app for my Non Profit Org based on Big Calendar. I need to use the Drag & Drop functionality. I can drag the event from a slot to another position, but the event does not stay in place and return back to its previous position. All other functionalities are working fine: creating and editing events. Here is the code

import React, { useState, useEffect } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import moment from 'moment';
import 'moment/locale/fr';
import Modal from 'react-bootstrap/Modal';
import CalendarForm from './CalendarForm';
import { observer } from 'mobx-react';
import { getCalendar } from './requests';

const localizer = momentLocalizer(moment);
const DnDCalendar = withDragAndDrop(Calendar);
const HomePage = ({ calendarStore }) => {
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [calendarEvent, setCalendarEvent] = useState({});
  const [initialized, setInitialized] = useState(false);
  let today = new Date();
  const hideModals = () => {
    setShowAddModal(false);
    setShowEditModal(false);
  };

  const getCalendarEvents = async () => {
    const response = await getCalendar();
    const evs = response.data.map((d) => {
      return {
        ...d,
        start: new Date(d.start),
        end: new Date(d.end),
      };
    });
    calendarStore.setCalendarEvents(evs);
    setInitialized(true);
  };
  const handleSelect = (event, e) => {
    const { start, end } = event;
    const data = { title: '', subject: '', start, end, allDay: false };
    setShowAddModal(true);
    setShowEditModal(false);
    setCalendarEvent(data);
  };
  const handleSelectEvent = (event, e) => {
    setShowAddModal(false);
    setShowEditModal(true);
    let { id, title, subject, start, end, allDay } = event;
    start = new Date(start);
    end = new Date(end);
    const data = { id, title, subject, start, end, allDay };
    setCalendarEvent(data);
  };
  const handleDragEvent = (event, e) => {
    setShowAddModal(false);
    setShowEditModal(false);
    let { id, title, subject, start, end, allDay } = event;
    start = new Date(start);
    end = new Date(end);
    const data = { id, title, subject, start, end, allDay };
    setCalendarEvent(data);
  };

  useEffect(() => {
    if (!initialized) {
      getCalendarEvents();
    }
  });

  return (
    <div className="page">
      <Modal show={showAddModal} onHide={hideModals}>
        <Modal.Header closeButton>
          <Modal.Title>Ajouter une session</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <CalendarForm
            calendarStore={calendarStore}
            calendarEvent={calendarEvent}
            onCancel={hideModals.bind(this)}
            edit={false}
          />
        </Modal.Body>
      </Modal>
      <Modal show={showEditModal} onHide={hideModals}>
        <Modal.Header closeButton>
          <Modal.Title>Editer la session</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <CalendarForm
            calendarStore={calendarStore}
            calendarEvent={calendarEvent}
            onCancel={hideModals.bind(this)}
            edit={true}
          />
        </Modal.Body>
      </Modal>
      <DnDCalendar
        localizer={localizer}
        events={calendarStore.calendarEvents}
        startAccessor="start"
        endAccessor="end"
        defaultView="week"
        selectable={true}
        resizable={true}
        onEventDrop={handleDragEvent}
        style={{ height: '70vh' }}
        onSelectSlot={handleSelect}
        onSelectEvent={handleSelectEvent}
        min={
          new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8)
        }
        max={
          new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23)
        }
        messages={{
          month: 'mois',
          week: 'semaine',
          day: 'jour',
          today: "aujourd'hui",
          next: 'suiv.',
          previous: 'préc.',
        }}
        resource="Test ressource"
        eventPropGetter={(event) => ({
          style: {
            backgroundColor: event.isDone === true ? '#ad4ca4' : '#3174ad',
          },
        })}
      />
    </div>
  );
};

export default observer(HomePage);

Answer 1

Drag and Drop does not explicitly update your events . You must provide an onEventDrop prop, with the method signature ({event, start, end, isAllDay}) => update your events .

const onEventDrop = ({event, start, end, isAllDay}) => {
  const updatedEvent = {...event, start, end, isAllDay};
  // Any other logic. If async saving your change, you'll probably
  // do the next line in a `.then()`
  setEvents((prevEvents) => {
    const filtered = prevEvents.filter((item) => item.id !== event.id);
    return [...filtered, updatedEvent];
  });
};