Giuseppe Lodi Rizzini Giuseppe Lodi Rizzini - 1 year ago 158
jQuery Question

drag-drop group of events connected together in FullCalendar

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download