如何在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/。