React-Big-Calendar 拖放月視圖總是從最左列拖動事件

Question

我需要幫助解決我在使用 big-react-calendar 時遇到的這個錯誤。 拖動事件時，無論鼠標在哪里，事件總是移動到最左邊的列。 不過，將事件從任何其他視圖移到不同的時間段都可以。 我們在這個項目中使用 next-js 和 tailwind-css。

這是一個關於這個錯誤的視頻。

謝謝您的幫助。

在測試日歷中

import "react-big-calendar/lib/css/react-big-calendar.css";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
 
import Router from "next/router";
import React, { useState } from "react";
import Select from "react-select";
 
import { Calendar, dateFnsLocalizer, Views } from "react-big-calendar";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
 
import format from "date-fns/format";
import parse from "date-fns/parse";
import startOfWeek from "date-fns/startOfWeek";
import getDay from "date-fns/getDay";
 
const locales = {
  "en-US": require("date-fns/locale/en-US"),
};
 
const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});
 
const DragAndDropCalendar = withDragAndDrop(Calendar);
 
export default function MyCalendar() {
  const [events, setEvents] = useState(
    [
      {
        id:1,
        title:"help",
        start:new Date(),
        end: new Date(),
      }
    ]
  );
 
 
  const [showCalendarModal, setShowCalendarModal] = useState(false);
  const [selectedDate, setSelectedDate] = useState(undefined);
 
  const [showAssignments, setShowAssignments] = useState(true);
  const [showCourseTimes, setShowCourseTimes] = useState(true);
  const [showOfficeHours, setShowOfficeHours] = useState(true);
  const [showStudySessions, setShowStudySessions] = useState(false); // add later
 
  const setView = [
    setShowAssignments,
    setShowCourseTimes,
    setShowOfficeHours,
    setShowStudySessions,
  ];
 
 
  const handleSelectSlot = ({ start, end, slots }) => {
    //pop modal up, from this and be able to pass through, these slots
    setSelectedDate(start);
    return;
  };
 
  const moveEvent = ({ event, start, end }) => {
    const thisEvent = event;
 
    const nextEvents = events.map((existingEvent) => {
      return existingEvent.id == event.id
        ? { ...existingEvent, start, end }
        : existingEvent;
    });
    setEvents(nextEvents);
  };
 
 
  const viewOptions = [
    { value: "Assignments", label: "Assignment due dates", index: 0 },
    { value: "Courses", label: "Courses times", index: 1 },
    { value: "Office Hours", label: "Office hours", index: 2 },
    {
      value: "Study Sessions",
      label: "Study sessions (Not implemented)",
      index: 3,
    },
  ];
 
  const filterViewChange = (selected) => {
    var indexOfSelected = [];
    selected.map((selection) =>
      indexOfSelected.push(selection.index)
    );
 
    viewOptions.map((option) =>
      indexOfSelected.includes(option.index)
        ? setView[option.index](true)
        : setView[option.index](false)
    );
  };
 
  return (
    <div className="h-auto">
      <div>
        <DragAndDropCalendar
          selectable
          resizable
          popup
 
          localizer={localizer}
          events={events}
          startAccessor="start"
          endAccessor="end"
 
          onEventDrop={moveEvent}
          onEventResize={moveEvent}
          onSelectEvent={(event) => handleSelectEvent(event)}
          onSelectSlot={handleSelectSlot}
 
          style={{ height: 500 }}
          defaultDate={new Date()}
        />
 
        <Select
          defaultValue={[viewOptions[0], viewOptions[1], viewOptions[2]]}
          isMulti
          options={viewOptions}
          name="View"
          onChange={filterViewChange}
        />
      </div>
    </div>
  );
}
 
// notes
// https://jquense.github.io/react-big-calendar/examples/index.html?ref=creativetim#prop-scrollToTime
 
//examples
// https://github.com/jyhwng/dashboard/blob/master/src/components/Calendar/FullCalendar.js
// https://demos.creative-tim.com/nextjs-material-dashboard-pro/admin/calendar?_ga=2.137767600.1882045019.1616627454-2002691398.1612228651
// https://www.creative-tim.com/learning-lab/nextjs/react-big-calendar/material-dashboard
 
// error fixes
// https://github.com/jquense/react-big-calendar/issues/234 // style loaderm
// https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr // no document found, x on ssr or have loading thing.
// https://stackoverflow.com/questions/24647839/referenceerror-document-is-not-defined-in-plain-javascript/24648001
// https://stackoverflow.com/questions/62348977/is-there-a-way-to-disable-resizing-and-dragging-of-events-for-on-specific-views

頁面調用 TestCalendar

import dynamic from "next/dynamic";

const Calendar = dynamic(() => import("@/components/calendars/TestCalendar"), {
  loading: () => <p>Loading...</p>,
  ssr: false,
});

export default function Dashboard() {
  return <Calendar />;
}

Answer 1

在他們的 gh 問題頁面上發現這是 ver 的一個錯誤。 0.33.2。 幸運的是，它目前正在解決中。 tiwatson 已修復它（謝謝），現在正在等待合並到 master 中。

這是我發現問題和拉取請求的線程。 https://github.com/jquense/react-big-calendar/issues/1886 https://github.com/jquense/react-big-calendar/pull/1892

編輯：他們合並了！ 耶！