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

Question

我正在使用 fullcalendar 版本 4，并且我已将自定义按钮添加到 'refresh' 当前 information/events 的日历。

这是我的按钮：

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

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

我有一个模态表单可以打开以收集活动信息。保存事件后，这就是我保存它的方式（通过 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

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

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

一种解决方案是将 AJAX "success" 函数中的 calendar.addEvent(event_object); 替换为简单的 calendar.refetchEvents(); - 然后它会立即从服务器重新加载，其中将包括新添加的事件，而不是直接向日历添加单独的独立事件。

另一种选择是在将事件添加到日历时将事件附加到源。 Add Event documentation 表示

source represents the Event Source you want to associate this event with. It can be a string Event Source ID or an Event Source Object. When the source is refetched, it will clear the dynamically added event from the internal cache before fetching. This parameter is optional.

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

calendar.addEvent(event_object, 1);

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

fullcalendar version 4: refetch events doesn't remove newly added event

javascript

fullcalendar

fullcalendar-scheduler

fullcalendar-4