html - React Fullcallendar v5 事件定位到光标问题 [更新]
问题描述
我正在尝试创建一个包含 Fullcalendar 的反应应用程序。
我已经设法使它工作,但是当我在其中拖动事件时遇到了一个奇怪的问题。一个事件元素跳到某处,然后在远处跟随我的光标。
当我释放鼠标按钮时,事件元素会跳转到日历上突出显示的日期。我尝试将相对定位添加到不同的父元素以在它们内部进行事件定位,但没有成功。
这是我的代码
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;
我做错了什么?
更新:我发现发生了什么,但我仍然不知道该怎么做。
我的项目中有一个左侧边栏和标题,并且没有这些元素 FullCalendar 可以正常工作。此外,它在 timeGridDay 视图和 timeGridWeek 上也可以正常工作。
所以基本上它只是在 dayGridMonth 视图上不能正常工作。似乎在 dayGridMonth 视图中它没有正确计算位置。
在这里可以做什么?
解决方案
解决了。问题出在我正在使用的 animated.css 中。删除后一切正常。
推荐阅读
- linux - nginx将子域的根目录动态更改为同级文件夹
- r - 增加点大小,或改变 GGplot 的形状
- c++ - 在 Ubuntu 20.04 (C++ API) 上设置 ONNX 运行时
- javascript - 使用 Javascript 和 Zapier 处理空值
- elm - 如何强制 Elm 重用 DOM 元素?
- javascript - 尽管有自定义验证逻辑,表单仍继续提交
- python-3.x - 运行脚本时表现 - format=plainb 错误
- acumatica - 如何在 Acumatica 中扩展 UI 扩展
- drop-down-menu - 如何更改 Watson Assistant 聊天机器人 UI 的下拉菜单语言
- python - 如何在圆角矩形上添加文本和/或更改 kivy 的背景?