Drop doesn't work in fullCalendar

Question

I can drag the event but I can't drop it. I mean I can drag it around as long as I'm holding it. But when I release event it immediately returns to the position before the drag. And so the event eventDrop has not ever been called.

I have all properties set to right values. Have checked them multiple times. All other functions like resize work fine.

calendar = $('#calendar').fullCalendar({
    monthNames: ['Январь', 'Ферваль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
    monthNamesShort: ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'],
    dayNames: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'], 
    dayNamesShort: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ВТ', 'СБ'],
    buttonText: {
        prev:     ' ◄ ',
        next:     ' ► ',
        prevYear: ' << ',
        nextYear: ' >> ',
        today:    'сегодня',
        month:    'месяц',
        week:     'неделя',
        day:      'день'
    },
    titleFormat: {
        month: 'MMMM yyyy',
        week: "d[ yyyy]{ '—'[ MMM] d, MMMM, yyyy}",
        day: 'd, MMMM, yyyy, dddd'
    },
    columnFormat: {
        month: 'dddd',
        week: 'ddd, d.M',
        day: 'dddd d.M'
    },
    timeFormat: {
        agenda: 'H:mm{ - H:mm}',
        '': 'H(:mm)'
    },
    weekMode: 'liquid',
    header: {
        left:   'title',
        center: '',
        right:  'agendaDay,agendaWeek,month today prev,next'
    },
    defaultView: 'agendaWeek',
    allDaySlot: false,
    axisFormat: 'H:mm',
    defaultEventMinutes: 60,
    slotMinutes: 30,
    minTime: 8,
    maxTime: 20,
    firstDay: 1,
    editable: true,
    selectable: true,
    selectHelper: true,
    disableDragging: false,
    disableResizing: false,
    select: function (start, end, allDay) {
            ...
        },
    eventClick: function (calEvent, jsEvent, view) {
            ...
        },
    eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
        ...
    },
    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
        ...
    }
}); 

Answer 1

This is a know bug. I assume you are using the most recent version of jQuery; version 1.7+ If that's the case you need to update fullcalendar.js to the most recent build.

$ git clone https://github.com/arshaw/fullcalendar.git
$ cd fullcalendar
$ make
$ cd build/fullcalendar

copy *.js and *.css files

Answer 2

Are you using the right drop method?

eventDrop is for when you're moving an event that already exists on the calendar to another date. For that, your code works fine.

drop is for when you're taking a jQuery-UI draggable object and dropping it on the calendar. You do not have code to handle this. You need to set the droppable option to true and hook up to the drop method.

Try this, my changes are near the bottom

calendar = $('#calendar').fullCalendar({
        monthNames: ['Январь', 'Ферваль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
        monthNamesShort: ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'],
        dayNames: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'], 
        dayNamesShort: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ВТ', 'СБ'],
        buttonText: {
            prev:     ' ◄ ',
            next:     ' ► ',
            prevYear: ' << ',
            nextYear: ' >> ',
            today:    'сегодня',
            month:    'месяц',
            week:     'неделя',
            day:      'день'
        },
        titleFormat: {
            month: 'MMMM yyyy',
            week: "d[ yyyy]{ '—'[ MMM] d, MMMM, yyyy}",
            day: 'd, MMMM, yyyy, dddd'
        },
        columnFormat: {
            month: 'dddd',
            week: 'ddd, d.M',
            day: 'dddd d.M'
        },
        timeFormat: {
            agenda: 'H:mm{ - H:mm}',
            '': 'H(:mm)'
        },
        weekMode: 'liquid',
        header: {
            left:   'title',
            center: '',
            right:  'agendaDay,agendaWeek,month today prev,next'
        },
        defaultView: 'agendaWeek',
        allDaySlot: false,
        axisFormat: 'H:mm',
        defaultEventMinutes: 60,
        slotMinutes: 30,
        minTime: 8,
        maxTime: 20,
        firstDay: 1,
        editable: true,
        selectable: true,
        selectHelper: true,
        disableDragging: false,
        disableResizing: false,
        select: function (start, end, allDay) {

            },
        eventClick: function (calEvent, jsEvent, view) {

            },
        eventResize: function(event, dayDelta, minuteDelta, revertFunc) {

        },
        eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
           alert('Moving an event'); 
        },

        droppable: true,
        drop: function(date, allDay) {
           alert('Dropping an external event');

           // The rest of this method is taken from external-dragging.html from the demo files

           // retrieve the dropped element's stored Event Object  
             var originalEventObject = $(this).data('eventObject');

           // we need to copy it, so that multiple events don't have a reference to the same object 
             var copiedEventObject = $.extend({}, originalEventObject);

           // assign it the date that was reported
             copiedEventObject.start = date;
           copiedEventObject.allDay = allDay;

             // render the event on the calendar
             // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
             $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

             // is the "remove after drop" checkbox checked?
             if ($('#drop-remove').is(':checked')) {
             // if so, remove the element from the "Draggable Events" list
               $(this).remove();
           }
        }
    });