React Fullcallendar v5 事件定位到游标问题 [更新]

Question

我正在尝试创建一个包含 Fullcalendar 的 React 应用程序。

我已经设法让它工作了，但是当我在其中拖动事件时我遇到了一个奇怪的问题。An event element jumps somewhere and then follows my cursor at distance.

当我释放鼠标按钮时，事件元素跳转到日历上突出显示的日期。我尝试将相对定位添加到不同的 parent 元素以在它们内部进行事件定位，但没有成功。

这是我的代码

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import Alert from "sweetalert2";

const Dashboard = () => {

    useEffect(() => {
        let draggableEl = document.getElementById("external-events");
        new Draggable(draggableEl, {
            itemSelector: ".fc-event",
            eventData: function(eventEl) {
                let title = eventEl.getAttribute("title");
                let id = eventEl.getAttribute("data");
                return {
                    title: title,
                    id: id
                };
            }
        });
    }, []);

    const state = {
        calendarEvents: [
            {
                title: "Birthday Party",
                start: new Date("2020-11-17 00:00"),
                id: "99999998"
            },
            {
                title: "Repeating Event",
                start: new Date("2020-11-05 00:00"),
                id: "99999999"
            },
            {
                title: "Repeating Event",
                start: new Date("2020-11-12 00:00"),
                id: "99999999"
            },
            {
                title: "Repeating Event",
                start: new Date("2020-11-22 00:00"),
                id: "99999999"
            },
        ]
    };


    const eventClick = (eventClick) => {
        Alert.fire({
            title: eventClick.event.title,
            html:
                `<div class="table-responsive">
      <table class="table">
      <tbody>
      <tr >
      <td>Title</td>
      <td><strong>` +
                eventClick.event.title +
                `</strong></td>
      </tr>
      <tr >
      <td>Start Time</td>
      <td><strong>
      ` +
                eventClick.event.start +
                `
      </strong></td>
      </tr>
      </tbody>
      </table>
      </div>`,

            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Remove Event",
            cancelButtonText: "Close"
        }).then(result => {
            if (result.value) {
                eventClick.event.remove(); // It will remove event from the calendar
                Alert.fire("Deleted!", "Your Event has been deleted.", "success");
            }
        });
    };

return (
                                    <FullCalendar
                                        headerToolbar={{
                                            left: 'prev,next today',
                                            center: 'title',
                                            right: 'dayGridMonth,timeGridWeek,timeGridDay'
                                        }}
                                        rerenderDelay={10}
                                        eventDurationEditable={false}
                                        editable={true}
                                        droppable={true}
                                        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                                        events={state.calendarEvents}
                                        drop={drop}
                                        eventClick={eventClick}
                                        selectable={false}
                                    />
)
};
export default Dashboard;

我做错了什么？

更新：我发现发生了什么，但我仍然不知道该怎么办。

我的项目中有左侧边栏和 header，没有这些元素，FullCalendar 工作正常。此外，它在 timeGridDay 视图和 timeGridWeek 中也能正常工作。

所以基本上它只在 dayGridMonth 视图上工作不正确。似乎在 dayGridMonth 视图中它没有正确计算位置。

这里可以做什么？

Answer 1

解决了。问题出在我使用的 animated.css 中。删除后一切正常。

React Fullcallendar v5 事件定位到游标问题 [更新]

React Fullcallendar v5 event positioning toward cursor issue [UPDATED]

html

css

reactjs

fullcalendar

fullcalendar-5