I'm seeking assistance with a bug I've encountered while using the big-react-calendar. The issue arises when dragging an event, as it consistently moves to the leftmost column regardless of mouse position. However, shifting the event to a different time slot from any other view functions properly. This project utilizes next-js and tailwind-css.
Click here to see a video showcasing the bug.
Thank you in advance for your assistance.
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 />;
}