拖放在FullCalendar中连接在一起的事件组
我在FullCalendar + Scheduler中连接了一系列事件，代码如下：
resourceGroupField: 'building', resources: [ { id: 'a', building: 'Impianto 1', title: 'Cliente Pippo' }, { id: 'b', building: 'Impianto 2', title: 'Cliente Pluto' }, { id: 'c', building: 'Impianto 3', title: 'Cliente Pallino' } ], events: [ { id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Carico su camion', id_evento_collegato: [1,2,3,4,5,6,7], editable: false }, { id: '2', resourceId: 'a', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Viaggio', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "red" }, { id: '3', resourceId: 'a', start: '2017-09-07T13:00:00', end: '2017-09-07T15:00:00', title: 'Scarico', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "grey" }, { id: '4', resourceId: 'a', start: '2017-09-07T15:00:00', end: '2017-09-07T19:00:00', title: 'Produzione', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "orange" }, { id: '5', resourceId: 'a', start: '2017-09-07T19:00:00', end: '2017-09-07T21:00:00', title: 'Pulizia impianto', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "blue" }, { id: '6', resourceId: 'a', start: '2017-09-07T21:00:00', end: '2017-09-07T22:00:00', title: 'Smontaggio', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "green" }, { id: '7', resourceId: 'a', start: '2017-09-07T22:00:00', end: '2017-09-08T06:00:00', title: 'Ritorno in azienda', id_evento_collegato: [1,2,3,4,5,6,7], editable: false, backgroundColor: "pink" } ] 我需要一个简单的代码，当我拖放一个事件时（例如ID = 1的事件……第一个），连接在一起的所有事件（使用数组：id_evento_collegato）跟随同时拖动的事件…所以所有事件都必须设置新的开始和结束时间。 我不想手动拖动所有7个事件…但我需要拖动1个事件，所有剩余的事件都跟随拖动的事件。
在附件中的例子。
[IMG] http://sofzh.miximages.com/jquery/ranggi.jpg [/ IMG]
任何人都可以帮我这样做吗？
在@ADyson的帮助下更新：
我试图删除所有事件的EDITABLE：FALSE。 如果我总是移动相同的事件（例如事件2）一切都好。 但是如果我移动一个事件（例如事件2）然后我尝试移动另一个事件（例如事件4）……“偶连链”就破了。 Firebug收到错误：
for (var i = 0; i < event.id_evento_collegato.length; i++)
有错误：
TypeError: event.id_evento_collegato is undefined
我的更新代码：
events: [ { id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Carico su camion', id_evento_collegato: [2,3,4,5,6,7] }, { id: '2', resourceId: 'a', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Viaggio', id_evento_collegato: [1,3,4,5,6,7], backgroundColor: "red" }, { id: '3', resourceId: 'a', start: '2017-09-07T13:00:00', end: '2017-09-07T15:00:00', title: 'Scarico', id_evento_collegato: [1,2,4,5,6,7], backgroundColor: "grey" }, { id: '4', resourceId: 'a', start: '2017-09-07T15:00:00', end: '2017-09-07T19:00:00', title: 'Produzione', id_evento_collegato: [1,2,3,5,6,7], backgroundColor: "orange" }, { id: '5', resourceId: 'a', start: '2017-09-07T19:00:00', end: '2017-09-07T21:00:00', title: 'Pulizia impianto', id_evento_collegato: [1,2,3,4,6,7], backgroundColor: "blue" }, { id: '6', resourceId: 'a', start: '2017-09-07T21:00:00', end: '2017-09-07T22:00:00', title: 'Smontaggio', id_evento_collegato: [1,2,3,4,5,7], backgroundColor: "green" }, { id: '7', resourceId: 'a', start: '2017-09-07T22:00:00', end: '2017-09-08T06:00:00', title: 'Ritorno in azienda', id_evento_collegato: [1,2,3,4,5,6], backgroundColor: "pink" } ], eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) { var newResourceId = event.resourceId; var relatedEvents = $("#calendar").fullCalendar("clientEvents", function(evt) { for (var i = 0; i < event.id_evento_collegato.length; i++) { if (evt.id == event.id_evento_collegato[i]) return true; } return false; }); for (var i = 0; i < relatedEvents.length; i++) { relatedEvents[i].resourceId = newResourceId; relatedEvents[i].start.add(delta); relatedEvents[i].end.add(delta); } $("#calendar").fullCalendar("updateEvents", relatedEvents); }
更新2：经过一些检查，我试图在这里添加一个提醒：
for (var i = 0; i < relatedEvents.length; i++) { relatedEvents[i].resourceId = newResourceId; relatedEvents[i].start.add(delta); relatedEvents[i].end.add(delta); alert(relatedEvents[i].id_evento_collegato); }
基本上“relatedEvents [i] .id_evento_collegato”在第一次移动后设置为UNDEFINED …
更新3：使用“2,3,4,5,6,7”解决了arrays[2,3,4,5,6,7]中更换的支架，但我仍然没有理解为什么
我想这会做你需要的。 它基于我的建议，其中id_evento_collegato列表不包含它所在事件的ID。
注意我从第一个事件中删除了editable: false ，以允许它被拖动。 如果要允许此function与任何事件一起使用，请从所有事件中删除该属性。
另请注意，它仅适用于拖动，而不适用于resize。 如果您也需要，请告诉我。
通过使用fullCalendar的“clientEvents”方法和filter，它可以非常简单地返回所有相关事件ID的事件对象。 然后，它使用eventDrop回调中包含的delta属性，这是一个指示事件移动时间的持续时间，以相同的数量更新所有相关事件的开始和结束时间。 最后调用“updateEvents”来更改日历本身的事件。
$('#calendar').fullCalendar({ schedulerLicenseKey: 'YourLicenseKey', defaultDate: '2017-09-07', scrollTime: "00:00:00", editable: true, header: { left: 'today prev,next', center: 'title', right: 'timelineDay,timelineWeek,timelineMonth,timelineYear' }, defaultView: "timelineDay", resourceGroupField: 'building', resources: [ { id: 'a', building: 'Impianto 1', title: 'Cliente Pippo' }, { id: 'b', building: 'Impianto 2', title: 'Cliente Pluto' }, { id: 'c', building: 'Impianto 3', title: 'Cliente Pallino' } ], events: [ { id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Carico su camion', id_evento_collegato: [2,3,4,5,6,7] }, { id: '2', resourceId: 'a', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Viaggio', id_evento_collegato: [1,3,4,5,6,7], editable: false, backgroundColor: "red" }, { id: '3', resourceId: 'a', start: '2017-09-07T13:00:00', end: '2017-09-07T15:00:00', title: 'Scarico', id_evento_collegato: [1,2,4,5,6,7], editable: false, backgroundColor: "grey" }, { id: '4', resourceId: 'a', start: '2017-09-07T15:00:00', end: '2017-09-07T19:00:00', title: 'Produzione', id_evento_collegato: [1,2,3,5,6,7], editable: false, backgroundColor: "orange" }, { id: '5', resourceId: 'a', start: '2017-09-07T19:00:00', end: '2017-09-07T21:00:00', title: 'Pulizia impianto', id_evento_collegato: [1,2,3,4,6,7], editable: false, backgroundColor: "blue" }, { id: '6', resourceId: 'a', start: '2017-09-07T21:00:00', end: '2017-09-07T22:00:00', title: 'Smontaggio', id_evento_collegato: [1,2,3,4,5,7], editable: false, backgroundColor: "green" }, { id: '7', resourceId: 'a', start: '2017-09-07T22:00:00', end: '2017-09-08T06:00:00', title: 'Ritorno in azienda', id_evento_collegato: [1,2,3,4,5,6], editable: false, backgroundColor: "pink" } ], eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) { var relatedEvents = $("#calendar").fullCalendar("clientEvents", function(evt) { for (var i = 0; i < event.id_evento_collegato.length; i++) { if (evt.id == event.id_evento_collegato[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/ ，该回调在事件拖动完成后运行。