CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Simon Thomsen
Simon Thomsen

Reputation: 1411

How to link two events when dragging in Fullcalendar?

I'm trying to drag and drop an event which is connected to another event.

My question is, if it's possible to drag two events at the same time, so they have the same space between when dragging?

At the moment it looks like this: http://st.d.pr/aDoFmf

Where the first event is the main event and the second event is a continued event from the first event (because there is a break between).

Does fullcalendar have a built in feature for this or something like that?

Looking forward to hear from you.

Upvotes: 1

Views: 1523

Answers (1)

ADyson
ADyson

Reputation: 61794

This is certainly possible with a bit of custom code, which I've used before for this purpose. You haven't said on what basis the events are linked, so I'm going to give an example which you can modify if you need to:

Let's say you define an event object with an extra field, called relatedEvents, which is an array of IDs to which the event is connected. In your case, your two events would be connected back to each other. Here's an example with three interconnected events:

{ 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] }

Once you have that extra custom structure, you can run some code as part of the eventDrop callback, which runs when an event has finished being dragged, and is dropped back onto the calendar.

This code looks at the related events for the dragged event, fetches those event objects from fullCalendar based on the ID, and then updates the start and end times of each related event by the same duration as the dragged event has changed (this is given by the delta parameter passed to the callback). 

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);
}

See https://fullcalendar.io/docs/event_ui/eventDrop/ for more details of the eventDrop callback.

Upvotes: 4

Related Questions