Full Calendar新手求助：外部拖拽事件撤销后日历残留问题

Hey there! No worries at all—we all start somewhere with FullCalendar 😊 Let's figure out why that dragged event is sticking around on your calendar even after you call revertFunc().

The Root Issue #

Looking at your drop function, I notice you're missing the revertFunc parameter in your callback signature! FullCalendar passes this function to the drop callback specifically to handle undoing the temporary calendar event created during the drag. Without including it in your parameters, the revertFunc() you're calling isn't the correct one that removes the calendar-side event (it only reverts the draggable element back to its list).

Fixes Based on Your FullCalendar Version #

Let's adjust your code depending on which version of FullCalendar you're using:

If you're using FullCalendar v4 or earlier

Update your drop function to include revertFunc as the last parameter:

function(date, jsEvent, ui, resourceId, revertFunc) { // Added revertFunc here
    var tag = $(this).data('event').tag;
    var eventDate = $(this).data('event').projectDate;
    var calDate = date.format();
    if (tag == PSTag) {
        if(eventDate != calDate) {
            alert('You must drop the event on the correct date');
            revertFunc(); // Now this targets the calendar's temporary event
            return;
        }
        var eventObjectId = $(this).data('event').schWork;
    }
    if (tag == WOTag) {
        var eventObjectId = $(this).data('event').workorder;
    }
    var title = $(this).data('event').title;
    alert(tag);
    updateCalendarEvent(eventObjectId, date.format(), resourceId, tag, title);
    if (tag != PHTag) {
        $(this).remove();
    }
    setupDraggableEvents();
}

If you're using FullCalendar v5 or later

v5+ uses an info object instead of individual parameters, which includes a revert() method. Rewrite your callback like this:

function(info) { // Use the info object parameter
    var tag = $(this).data('event').tag;
    var eventDate = $(this).data('event').projectDate;
    var calDate = info.date.format();
    var resourceId = info.resourceId;
    
    if (tag == PSTag) {
        if(eventDate != calDate) {
            alert('You must drop the event on the correct date');
            info.revert(); // Call revert directly on the info object
            return;
        }
        var eventObjectId = $(this).data('event').schWork;
    }
    if (tag == WOTag) {
        var eventObjectId = $(this).data('event').workorder;
    }
    var title = $(this).data('event').title;
    alert(tag);
    updateCalendarEvent(eventObjectId, info.date.format(), resourceId, tag, title);
    if (tag != PHTag) {
        $(this).remove();
    }
    setupDraggableEvents();
}

Extra Troubleshooting Tip #

If you still see the event lingering after the fix, you can add an extra step to manually remove the temporary event from the calendar:

// For v5+
info.revert();
var calendar = $('#your-calendar-id').fullCalendar('getCalendar');
calendar.removeEvent(info.event); // Force-remove the temp event

// For v4
revertFunc();
var calendar = $('#your-calendar-id').fullCalendar('getCalendar');
var tempEvent = calendar.getEvents().find(evt => evt.title === $(this).data('event').title && evt.start.format() === calDate);
if(tempEvent) calendar.removeEvent(tempEvent);

Give these changes a try—this should make the temporary event disappear immediately when you close the alert, no refresh needed. Let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者Roxy521