javascript - 在 Fullcalendar 中拖动时如何链接两个事件？

Question

我正在尝试拖放连接到另一个事件的事件。

我的问题是，是否可以同时拖动两个事件，以便它们在拖动时具有相同的间距？

目前看起来像这样:http://st.d.pr/aDoFmf

其中第一个事件是主要事件，第二个事件是第一个事件的连续事件(因为中间有一个中断)。

fullcalendar 有内置功能吗？

期待您的来信。

Answer 1

这当然可以通过一些自定义代码来实现，我之前曾用于此目的。您还没有说明这些事件是在什么基础上链接的，因此我将给出一个示例，您可以根据需要进行修改:

假设您定义了一个带有额外字段的事件对象，称为 latedEvents，它是事件所连接的 ID 数组。就您而言，您的两个事件将相互连接。下面是一个包含三个互连事件的示例:

{ id: 1, start: '2017-10-11T11:00:00', end: '2017-10-11T13:00:00', title: 'Event 1', relatedEvents: [2, 3] }
{ id: 2, start: '2017-10-11T15:00:00', end: '2017-10-11T17:00:00', title: 'Event 2', relatedEvents: [1, 3] }
{ id: 3, start: '2017-10-11T19:00:00', end: '2017-10-11T21:30:00', title: 'Event 3', relatedEvents: [1, 2] }

一旦有了额外的自定义结构，您就可以在 eventDrop 回调中运行一些代码，该回调在事件完成拖动并被拖回日历时运行。

此代码查看拖动事件的相关事件，根据 ID 从 fullCalendar 获取这些事件对象，然后按照与拖动事件更改相同的持续时间更新每个相关事件的开始和结束时间(此由传递给回调的 delta 参数给出)。

eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
    var relatedEvents = $("#calendar").fullCalendar("clientEvents", function(evt) {
        for (var i = 0; i < event.relatedEvents.length; i++)
        {
            if (evt.id == event.relatedEvents[i]) return true;
        }

        return false;
    });

    for (var i = 0; i < relatedEvents.length; i++)
    {
        relatedEvents[i].start.add(delta);
        relatedEvents[i].end.add(delta);
    }

    $("#calendar").fullCalendar("updateEvents", relatedEvents);
}

参见https://fullcalendar.io/docs/event_ui/eventDrop/有关 eventDrop 回调的更多详细信息。