用拖放反应大日历

Posted 2023-05-08

【中文标题】用拖放反应大日历

【英文标题】：React-big-calendar with drag&drop

【发布时间】：2020-11-03 00:19:00

【问题描述】：

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

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);

【参考方案1】：

拖放不会显式更新您的events。您必须提供 onEventDrop 属性，方法签名为 (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];
  );
;