通过拖动删除jQuery FullCalendar事件

Question

我有这个代码:

eventDragStop: function(event, jsEvent, ui, view) {
    calendar.fullCalendar('removeEvents', event.id);
}

但我被困在那里.我希望能够将事件拖到类名为"event-delete"的div上,并删除该事件.

我已经尝试了几种方法来识别事件是否被拖过删除div无济于事.上面的解决方案似乎部分起作用.事件触发器正在工作但冻结任何拖动的元素.

Answer 1

只需自定义它并将其扔进你的js.

        $('#calendar').children('.fc-content').children().append('<div id="calendarTrash" style="float: right; padding-top: 5px; padding-right: 5px; padding-left: 5px;"><span class="ui-icon ui-icon-trash"></span></div>');

    //listens for drop event
    $("#calendarTrash").droppable({
        tolerance: 'pointer',
        drop: function(event, ui) { 
            if ( dragged && ui.helper && ui.helper[0] === dragged[0] ) {
                var event = dragged[1];
                var answer = confirm("Delete Event?")
                if (answer)
                {
                    $.ajax({
                        url:'/employees/removeevent?id='+event.id,
                        dataType: 'json',
                        async: false,
                        error: function(xhr, ajaxOptions, thrownError)
                        {
                            //console.log(xhr.status);
                            //console.log(thrownError);
                        },
                        success: function()
                        {
                            calendar.fullCalendar( 'removeEvents' , event.id  );
                        }
                    });
                }
            }
        }
    });

        eventDragStart: function( event, jsEvent, ui, view ) { 
            dragged = [ ui.helper[0], event ];
        },