完整日历-拖放-自定义

Question

我使用的是React调度器-FullCalendar。我喜欢保留将事件从一个资源更改为另一个资源的拖放功能。但是有没有一种方法可以禁用水平拖动来更改时间？

同样现在，拖放的工作方式就像事件将从一个资源粘到另一个资源一样，并且没有平滑的拖动操作。如果可能的话，有人能帮我找出一种在FullCalendar中实现平滑拖放(事件将跟随鼠标(的方法吗？

1. 禁用水平拖放(避免更改时间(
2. 平滑拖放，而不是从一部分粘贴到另一部分

版本：5.1完整日历|Reactjs

PS：我需要禁用水平拖动，用户甚至不能开始拖动，(像检查dragEnd这样的逻辑不起作用(

Answer 1

1。禁用水平拖放(避免更改时间(

您可以使用onDrop，并且可以分别使用info.event和info.oldEvent获取开始时间和结束时间。

工作演示

<FullCalendar
editable={true}
defaultView="timeGridWeek"
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay"
}}
header={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
}}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
ref={this.calendarComponentRef}
weekends={this.state.calendarWeekends}
events={this.state.calendarEvents}
dateClick={this.handleDateClick}
eventDrop={info => {//<--- see from here
const { start, end } = info.oldEvent._instance.range;
console.log(start, end);
const {
start: newStart,
end: newEnd
} = info.event._instance.range;
console.log(newStart, newEnd);
if (new Date(start).getDate() === new Date(newStart).getDate()) {
info.revert();
}
}}
/>

2.平滑拖放，而不是从一部分粘到另一部分

找不到快速带走的解决方案。我可以解决这个问题，但需要更多的时间来找到解决方案。如果我有时间，我稍后会回来更新答案。