Search code examples
eventsresourcesfullcalendarscheduler

Get the new resource id after an event has been dragged or resized in FullCalendar


I'm using FullCalendar with the Scheduler plugin and I'm trying to get the new resource id for the event that has just been dragged or resized. If I console.log the event argument of eventResize or eventDragStop functions I always get the initial resource id of the event.

Any idea how can I achieve this?

Bellow is the code I have so far:

$('#calendar').fullCalendar({
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    locale: 'ro',
    header: {
        left: '',
        center: 'title',
        right: ''
    },
    defaultView: 'agendaDay',
    views: {
        agenda: {
            titleFormat: 'dddd, D MMMM'
        }
    },
    minTime: '07:00:00',
    maxTime: '24:00:00',
    slotDuration: '00:30:00',
    slotLabelFormat: 'HH(:mm)',
    allDaySlot: false,
    resources: {
        url: '/some/endpoint/here',
        type: 'POST',
        data: {
            type: $('#type').val()
        }
    },
    events: '/some/other/endpoint/here',
    eventOverlap: false,
    eventConstraint: {
        start: '07:00',
        end: '24:00'
    },

    dayClick: function(date, jsEvent, view, resourceObj) {
        var check = moment(date).format('YYYY-MM-DD');
        var today = moment(new Date()).format('YYYY-MM-DD');

        if (check >= today) {
            // Some logic here
        }
    },

    eventClick: function(calEvent, jsEvent, view) {
        var check = moment(calEvent.start).format('YYYY-MM-DD');
        var today = moment(new Date()).format('YYYY-MM-DD');

        if (check >= today) {
            // Some logic here
        }
    },

    eventResize: function(event, delta, revertFunc, jsEvent, ui, view) {
        console.log('Resize', event, jsEvent);
    },

    eventDragStop: function(event, jsEvent, ui, view) {
        console.log('Drag', event);
    }
});

Solution

  • The documentation for "eventDragStop" (https://fullcalendar.io/docs/eventDragStop) explicitly states

    It is triggered before the event’s information has been modified

    So that explains why the resource ID has not changed when you log it from there.

    The callback you want to be handling instead is "eventDrop" (https://fullcalendar.io/docs/eventDrop), which is triggered when the dragging stops and the event data has been updated to reflect its new location.

    For example:

    eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) { 
      console.log("Resource: " + event.resourceId);
    }
    

    should get you the information you want.

    Obviously if you only resize an event that cannot change the resource it belongs to, so that situation is not relevant to your issue.