Search code examples
javascriptfullcalendarfullcalendar-2

fullCalendar eventResize function never triggered


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.


Solution

  • 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