Avatar
Avatar

Reputation: 15156

FullCalendar.js: Event callbacks not firing for added events that get resized/clicked/dropped?

After adding an event and then changing it again, nothing happens, // * no callback. I even used fullCalendar('refetchEvents') still no luck. Am I missing something? Here is the code:

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek'
        },
        defaultDate: '2015-04-20',
        editable: false,
        eventLimit: true,
        firstDay: 1,
        defaultView: 'agendaWeek',
        timeFormat: 'HH:mm',
        lang: 'de',
        columnFormat: 'dddd D.M.',
        allDaySlot: false,
        slotDuration: '00:30:00', // default is 30 min
        minTime: '12:00:00',
        // maxTime: '23:00:00',
        contentHeight: 600,
        events: [
            {
                title: '',
                start: '2014-09-01T18:00:00',
                end: '2014-09-01T20:00:00',
                dow: [1], // repeat same weekday
                rendering: 'background', 
                color: '#6BA5C2'
            },
            {
                title: '',
                start: '2014-09-02T20:00:00',
                end: '2014-09-02T22:00:00',
                dow: [2], // repeat same weekday
                rendering: 'background', 
                color: '#6BA5C2'
            },
            {
                title: 'Event',
                start: '2015-04-24 13:00:00',
                end: '2015-04-24 14:00:00',
                color: '#F77'
            },
        ],
        // * no callback
        viewDisplay: function (element) {
            alert(element);
        },

        // adding an event
        selectable: true,
        selectHelper: true,
        select: function(start, end) {
            var title = prompt('Deine E-Mail:');
            var eventData;
            if(title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end,
                    color: '#00AA00',
                    editable: true,
                    eventDurationEditable: true,
                    // * no callback
                    eventResizeStop: function(event, jsEvent, ui, view) {
                        alert('end');
                    },
                    // * no callback
                    eventClick: function(calEvent, jsEvent, view) {
                        alert('clicked');
                    },
                    // * no callback
                    eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
                        alert('dropped');
                    },
                    // * no callback
                    eventResize: function(event, delta, revertFunc, jsEvent, ui, view) {
                        alert(event.title + ' end is now ' + event.end.format());
                    },
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick = true
                $('#calendar').fullCalendar('refetchEvents');
                // not helping either
                $('#calendar').fullCalendar('rerenderEvents');
            }
            $('#calendar').fullCalendar('unselect');
        },

    });

Visible proof:

enter image description here

Upvotes: 1

Views: 2338

Answers (1)

DanielST
DanielST

Reputation: 14133

Those callbacks are not properties of the events. They are top level fullcalendar options. Each section of the docs represents one FC top level option. Some options can also be specific to certain events, but they are mentioned as such in the docs. If you look at event object you see that there is no eventResize property, for example.

So the fix is to just move the callbacks to the top level:

$('#calendar').fullCalendar({
    /*...other options*/
    eventResizeStop: function (event, jsEvent, ui, view) {
        alert('end');
    },
    // * no callback
    eventClick: function (calEvent, jsEvent, view) {
        alert('clicked');
    },
    // * no callback
    eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
        alert('dropped');
    },
    // * no callback
    eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
        alert(event.title + ' end is now ' + event.end.format());
    },
    events: [{
        title: '',
    /*... etc*/

Here's a JSFiddle with it working.

Upvotes: 2

Related Questions