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

Question

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

我的问题是，是否可以同时拖动两个事件，所以拖动时它们之间有相同的空间？

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

其中第一个事件是主要事件，第二个事件是从第一个事件开始的连续事件（因为两者之间有间隔）。

fullcalendar是否为此或类似功能提供内置功能？

期待着听到您的意见。

Answer 1

当然，这可以通过一些自定义代码来实现，我之前已为此目的使用过。 您没有说事件是基于什么关联的，所以我将给出一个示例，您可以根据需要进行修改：

假设您定义了一个带有附加字段的事件对象，该字段称为relatedEvents ，它是事件连接到的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);
}

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