javascript - 如何删除未保存的事件？

Question

我正在使用 jquery 和 fullcalendar 来安排事件。当用户选择时间段时，日历右侧会显示一个表单，他们可以在其中输入其他详细信息。

通过“选择”回调，我在日历上呈现一个临时事件，以便我的用户在填写表单时获得视觉反馈。

但是，当他们错误选择了时间段时，他们可以选择新的时间段。然而，这会在日历上呈现第二个(可能还有第三个、第四个……)事件。

我以为我可以使用对 element.siblings().remove() 的“eventAfterRender(event, element)”回调，但这失败了，因为每个 renderEvent 都会为日历上的每个事件调用 eventAfterRender。

也许我缺少一个回调或方法，但据我所知，没有简单的方法可以删除“未保存”事件。

下面是一些示例代码。

var fullCal = '';
$(function() {
    fullCal = $('#fullcalendar').fullCalendar({
        // options
        select: SelectDate,
        eventAfterRender: function(event, element) { 
            // this does not work as it simply just keeps the last event in the DOM.
            element.siblings().remove()
        },
        viewDisplay: UnselectDate  // hides and clears the form, intended behavior

    });

});

function SelectDate(startDate, endDate, allDay, jsEvent, view) {
    $('#BijlesForm').show();

    var BijlesEvent = {start: startDate, end: endDate, title: 'Bijles', allDay: false};
    fullCal.fullCalendar('renderEvent', BijlesEvent);

    //fill the form
}

Answer 1

好吧，我真傻。一定是疲劳什么的，但我自己找到了办法。

我删除了 eventAfterRender 回调并将 SelectDate 函数更改为:

function SelectDate(startDate, endDate, allDay, jsEvent, view) {
    $('#BijlesForm').show();

    fullCal.fullCalendar( 'removeEvents', 'unsaved' )
    var BijlesEvent = {start: startDate, end: endDate, title: 'Bijles', allDay: false, id: 'unsaved'};
    fullCal.fullCalendar('renderEvent', BijlesEvent);
}

这就像一个魅力。这也是首选的做事方式，还是应该采取不同的方式？