带有拖放功能的 React-big-calendar

Question

我正在为我的非营利组织开发一个基于大日历的应用程序。我需要使用拖放功能。我可以将事件从插槽拖动到另一个位置，但事件不会留在原处并返回到之前的位置。\n所有其他功能都工作正常：创建和编辑事件。\n这里是代码

\n

import React, { useState, useEffect } from 'react';\nimport { Calendar, momentLocalizer } from 'react-big-calendar';\nimport withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';\nimport moment from 'moment';\nimport 'moment/locale/fr';\nimport Modal from 'react-bootstrap/Modal';\nimport CalendarForm from './CalendarForm';\nimport { observer } from 'mobx-react';\nimport { getCalendar } from './requests';\n\nconst localizer = momentLocalizer(moment);\nconst DnDCalendar = withDragAndDrop(Calendar);\nconst HomePage = ({ calendarStore }) => {\n  const [showAddModal, setShowAddModal] = useState(false);\n  const [showEditModal, setShowEditModal] = useState(false);\n  const [calendarEvent, setCalendarEvent] = useState({});\n  const [initialized, setInitialized] = useState(false);\n  let today = new Date();\n  const hideModals = () => {\n    setShowAddModal(false);\n    setShowEditModal(false);\n  };\n\n  const getCalendarEvents = async () => {\n    const response = await getCalendar();\n    const evs = response.data.map((d) => {\n      return {\n        ...d,\n        start: new Date(d.start),\n        end: new Date(d.end),\n      };\n    });\n    calendarStore.setCalendarEvents(evs);\n    setInitialized(true);\n  };\n  const handleSelect = (event, e) => {\n    const { start, end } = event;\n    const data = { title: '', subject: '', start, end, allDay: false };\n    setShowAddModal(true);\n    setShowEditModal(false);\n    setCalendarEvent(data);\n  };\n  const handleSelectEvent = (event, e) => {\n    setShowAddModal(false);\n    setShowEditModal(true);\n    let { id, title, subject, start, end, allDay } = event;\n    start = new Date(start);\n    end = new Date(end);\n    const data = { id, title, subject, start, end, allDay };\n    setCalendarEvent(data);\n  };\n  const handleDragEvent = (event, e) => {\n    setShowAddModal(false);\n    setShowEditModal(false);\n    let { id, title, subject, start, end, allDay } = event;\n    start = new Date(start);\n    end = new Date(end);\n    const data = { id, title, subject, start, end, allDay };\n    setCalendarEvent(data);\n  };\n\n  useEffect(() => {\n    if (!initialized) {\n      getCalendarEvents();\n    }\n  });\n\n  return (\n    <div className="page">\n      <Modal show={showAddModal} onHide={hideModals}>\n        <Modal.Header closeButton>\n          <Modal.Title>Ajouter une session</Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <CalendarForm\n            calendarStore={calendarStore}\n            calendarEvent={calendarEvent}\n            onCancel={hideModals.bind(this)}\n            edit={false}\n          />\n        </Modal.Body>\n      </Modal>\n      <Modal show={showEditModal} onHide={hideModals}>\n        <Modal.Header closeButton>\n          <Modal.Title>Editer la session</Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <CalendarForm\n            calendarStore={calendarStore}\n            calendarEvent={calendarEvent}\n            onCancel={hideModals.bind(this)}\n            edit={true}\n          />\n        </Modal.Body>\n      </Modal>\n      <DnDCalendar\n        localizer={localizer}\n        events={calendarStore.calendarEvents}\n        startAccessor="start"\n        endAccessor="end"\n        defaultView="week"\n        selectable={true}\n        resizable={true}\n        onEventDrop={handleDragEvent}\n        style={{ height: '70vh' }}\n        onSelectSlot={handleSelect}\n        onSelectEvent={handleSelectEvent}\n        min={\n          new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8)\n        }\n        max={\n          new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23)\n        }\n        messages={{\n          month: 'mois',\n          week: 'semaine',\n          day: 'jour',\n          today: "aujourd'hui",\n          next: 'suiv.',\n          previous: 'pr\xc3\xa9c.',\n        }}\n        resource="Test ressource"\n        eventPropGetter={(event) => ({\n          style: {\n            backgroundColor: event.isDone === true ? '#ad4ca4' : '#3174ad',\n          },\n        })}\n      />\n    </div>\n  );\n};\n\nexport default observer(HomePage);\n\n

\n

Answer 1

拖放不会显式更新您的events. 您必须提供一个onEventDrop带有方法签名的 prop ({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];
  });
};