问题
i've a sequence of events connected together in FullCalendar + Scheduler, with this code:
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" }
]
I need a simple code that when I drag-drop an event (for example event with ID = 1...the first), all the events connected together (using array: id_evento_collegato) follow the event dragged at the same time...so all the events have to set the new start and end time. I don't want to drag all the 7 events manually...but i need to drag 1 event and all remaining events follow the event dragged.
In attachment the example.
[IMG]http://i68.tinypic.com/ranggi.jpg [/IMG]
Can anyone help me to do this?
UPDATE after help of @ADyson:
I tried to remove EDITABLE: FALSE to all events. if i move ALWAYS the same event (for example event 2) all is ok. But if i move an event (example event 2) and then I try to move another event (example event 4)...the "even-chain" broke. Firebug get an error on:
for (var i = 0; i < event.id_evento_collegato.length; i++)
With error:
TypeError: event.id_evento_collegato is undefined
My updated code:
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);
}
UPDATE 2: After some checks, i tried to add an alert here:
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);
}
Basically "relatedEvents[i].id_evento_collegato" set to UNDEFINED after the first move...
UPDATE 3: Solved changing brakets in array [2,3,4,5,6,7] with "2,3,4,5,6,7" but i still don't undestand why
回答1:
I think this will do what you need. It is based on what I suggested, where the id_evento_collegato list does not contain the ID of the event it is within.
Note I removed editable: false from the first event, to allow it to be dragged. If you want to allow this functionality to work with any of the events, then remove that property from all of them.
Note also that it only works for dragging, not resizing. If you need that as well, please let me know.
It works quite simply by using fullCalendar's "clientEvents" method, with a filter, to return the event objects for all the related event IDs. Then it uses the delta property included in the eventDrop callback, which is a Duration indicating the amount of time by which the event was moved, to update the start and end times of all the related events by the same amount. Finally "updateEvents" is called to change the events on the calendar itself.
$('#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);
}
});
See https://fullcalendar.io/docs/event_ui/eventDrop/ for more details of the eventDrop callback, which runs when an event has finished being dragged.
来源：https://stackoverflow.com/questions/46539993/drag-drop-group-of-events-connected-together-in-fullcalendar