如何在dayGridWeek视图中更改在某一天移动项目的开始

Question

我使用的是fullcalendar dayGridWeek视图。https://fullcalendar.io/docs/daygrid-view当我把一个项目从一天移到另一天时，开始时间不会改变，只是日子变了。我想检测事件在哪个位置被丢弃。如果它被放置在另一个事件之上。然后我想更新开始，使其适合其他事件之前。如果它被放置在另一个事件下面。然后我想更新开始，使其适合于其他事件之后。

我已经检查了https://fullcalendar.io/docs/eventDrop方法，但这并没有给出关于它在其他事件中被丢弃的位置的信息。

有人知道如何实现这一点吗?

Answer 1

要实现这种行为，您可以在FullCalendar中使用eventtoverlap回调。这个回调函数在事件被删除时被调用，用于确定该事件是否应该与其他事件重叠。

在eventtoverlap函数中，您可以使用stagedEvent和existingEvent参数访问在放置位置出现的其他事件。这些参数分别表示要删除的事件和与之重叠的事件。

根据被删除事件相对于现有事件的位置，您可以更新被删除事件的开始时间，使其适合于现有事件之前或之后。要更新事件的开始时间，可以使用FullCalendar实例的updateEvent方法。

下面是一个如何实现此行为的示例:

var calendar = new FullCalendar.Calendar(calendarEl, {
// ... other options ...
eventOverlap: function(stagedEvent, existingEvent) {
if (stagedEvent.id !== existingEvent.id) {
// check if the staged event overlaps with the existing event
var stagedEventStart = stagedEvent.start;
var stagedEventEnd = stagedEvent.end;
var existingEventStart = existingEvent.start;
var existingEventEnd = existingEvent.end;
var overlaps = (stagedEventStart < existingEventEnd) && (stagedEventEnd > existingEventStart);
if (overlaps) {
// check if the staged event is dropped above or below the existing event
var stagedEventTop = $(stagedEvent.el).offset().top;
var existingEventTop = $(existingEvent.el).offset().top;
if (stagedEventTop < existingEventTop) {
// move the staged event to fit before the existing event
var newStart = existingEventStart;
calendar.updateEvent({ id: stagedEvent.id, start: newStart });
} else {
// move the staged event to fit after the existing event
var newStart = existingEventEnd;
calendar.updateEvent({ id: stagedEvent.id, start: newStart });
}
}
}
}
});

在本例中，我们使用事件的开始时间和结束时间检查阶段事件是否与现有事件重叠。如果有重叠，我们将使用jQuery的offset方法比较事件在页面上的垂直位置，从而检查阶段性事件是落在现有事件之上还是之下。

如果将分阶段事件放置在现有事件之上，我们使用updateEvent方法更新分阶段事件的开始时间，使其适合于现有事件之前。如果将分阶段事件放到现有事件的下面，我们将更新分阶段事件的开始时间，使其符合现有事件的开始时间。

请注意，eventtoverlap回调函数会为与分阶段事件重叠的每个事件调用，因此，如果分阶段事件与多个事件重叠，您可能需要多次调整分阶段事件的开始时间。