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

时间:2017-10-11 08:32:10

标签: javascript jquery fullcalendar

我试图拖放与另一个事件相关的事件。

我的问题是,如果可以同时拖动两个事件,那么它们在拖动时间距是否相同?

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

第一个事件是主要事件,第二个事件是第一个事件的持续事件(因为中间有事件)。

fullcalendar是否具有内置功能或类似内容?

期待收到你的来信。

1 个答案:

答案 0 :(得分:4)

这可以通过一些自定义代码实现,我之前为此目的使用过该代码。您还没有说明事件的基础是什么,所以我将举例说明您需要修改的内容:

假设您定义了一个带有额外字段的事件对象,名为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/