fullcalendar 版本 4：重新获取事件不会删除新添加的事件

Question

我正在使用 fullcalendar 版本 4，并且我添加了一个自定义按钮来使用当前信息/事件“刷新”日历。

这是我的按钮：

 customButtons: {
        myReloadButton: {
            text: 'refresh',
             click: function() {
                    calendar.refetchEvents();
                    calendar_mini.refetchEvents();
               }
            }

如您所见，我有两个日历要刷新。 它工作正常，但我注意到一个问题。 当我创建一个新事件时，它会按原样添加到日历中。 但是，如果用户随后立即单击“刷新”按钮，则在重新加载事件后，刚刚添加的事件会显示两次。 似乎在刷新期间从未删除新添加的事件。

我有一个模式表单，可以打开以收集事件的信息。 保存事件后，这是我保存它的方式（通过 ajax 调用）。 在 ajax 的成功中，我使用 .addEvent() 将事件添加到我的日历中

 var location_id = $('#formEventModal #location_id').val();
 var saw_by_id= $('#formEventModal #saw_by_id').val();

$.ajax({
            url: "ajax_insert.php?table=appointments",
            dataType: 'json',
            type: "POST",
            data: $('#appointmentForm').find(':input').not('.dont_serialize').serialize(),
            success: function(response) {
                if (response.success) {

                    //get the inserted id of the appt just added so it can be updated on the stop if needed.
                    var lastInsertID = response.lastInsertID;

                    var event_object = {
                        id: lastInsertID,
                        location_id: location_id,
                        resourceId: saw_by_id,
                    };

                        calendar.addEvent(event_object);
                        calendar_mini.addEvent(event_object);

为什么刷新按钮没有删除新添加的事件？

Answer 1

问题是重新获取事件只是从定义的源重新加载事件。 它对未附加到源的独立事件没有任何影响。

有两种方法可以解决这个问题

一种解决方案是替换calendar.addEvent(event_object); 在 AJAX“成功”函数中，只需使用calendar.refetchEvents(); - 然后它立即从服务器重新加载，其中将包括新添加的事件，而不是直接向日历添加单独的独立事件。

另一种选择是在将事件添加到日历时将事件附加到源。 添加事件文档说

source表示您希望将此事件与其关联的事件源。 它可以是字符串事件源 ID 或事件源对象。 当重新获取源时，它将在获取之前从内部缓存中清除动态添加的事件。 该参数是可选的。

因此，如果您在声明事件源时为其提供了 ID，则可以将其放置在此处作为将事件与源关联的额外选项。 像这样的东西：

calendar.addEvent(event_object, 1);