fullCalendar eventResize function never triggered

Question

Sorry if this is a duplicate. I've searched a lot before posting this but couldn't find an answer.

I'm using fullCalendar. It shows a beautiful calendar, and with "editable: true" option I can drag the event and move it to any date on the page. But the problem is the "eventResize" function is never called. My code is like below

function calendar() {
    $('#calendar').fullCalendar({
        locale: 'nl',
        header: {
            left:'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        timeFormat: 'H:mm',
        allDaySlot: false,
        eventSources: [
            {
                url: '/mypath/get_events',
                type: 'post',
            }
        ],
        eventColor: '#cccccc',
        editable: true,
        eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
            alert("let's change the dates");
        },
        slotEventOverlap: true,
        height: 'auto',
        droppable: false
    });
}

Of course I have the following on top

<link rel="stylesheet" href="/mypath/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="/mypath/fullcalendar/fullcalendar.print.css" media="print">
<script type="text/javascript" src="/mypath/fullcalendar/jquery.min.js"></script>
<script type="text/javascript" src="/mypath/fullcalendar/moment.min.js"></script>
<script type="text/javascript" src="/mypath/fullcalendar/fullcalendar.min.js"></script>

I'm using fullCalendar version 2.2.5, if it matters.

score 1 · Accepted Answer · answered Jan 08 '20 at 10:41

1

I think you're looking for the eventDrop event. The eventResize is triggered when an event is resized in the day view, e.g. when you drag the bottom of the event to end an hour later.

eventDrop: function(eventDropInfo) {
  console.log(eventDropInfo)
}

Docs for eventDrop

answered Jan 08 '20 at 10:41

Jap Mul

17,398
5
55
66

Right idea...but your code and your documentation link is for v4, while OP clearly stated they are using v2. The differences are substantial, so you'll need to revise your answer for it to be useful. – ADyson Jan 08 '20 at 11:24
Yes! It works! Thanks a lot!!! And yup mine is v2 but it still works :) – jexpatie Jan 08 '20 at 11:30

score 0 · Answer 2 · answered Jan 08 '20 at 11:28

You're looking at the wrong callback.

As per the docs, eventResize only occurs when the event's duration has changed - i.e. the event now has a different length, because you changed either the start or end date, but not both. (In the UI this is done by clicking and dragging on the top or bottom border of the event so that its size changes.)

If you're moving the event to a different date/time, without changing its length/duration, then you are not resizing it, you're dragging and dropping it. That's why the event isn't being triggered.

You need to use the eventDrop callback instead. This is triggered when dragging stops and the event has moved to a different day/time. e.g.

eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) { 
  alert("event was moved");
}

fullCalendar eventResize function never triggered

2 Answers2