React-Big-Calendar Drag and Drop month view always drags event from most left column

Question

I need help with this bug I've encountered while using big-react-calendar. When dragging an event, the event always moves to the most left column despite where the mouse is. Moving the event to a different time slot from any other view works just okay though. We're using next-js for this project alongside tailwind-css.

Here is a video of what the bug looks like.

Thank you for your help.

In Test Calendar

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

Page calling 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

Found out on their gh issue page that this is a bug with ver. 0.33.2. Luckily it's currently being resolved. tiwatson has fixed it (thank you) and is now waited to be merged into master.

Here is the thread that I found the issue and the pull request. https://github.com/jquense/react-big-calendar/issues/1886 https://github.com/jquense/react-big-calendar/pull/1892

Edit: They merged it! Yay!