Question

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

这是我的按钮：

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

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

我有一个模式表格，该表格可以打开以收集有关事件的信息。保存事件后，这就是我如何保存事件（通过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();-然后立即从服务器重新加载，其中将包括新添加的事件，而不是添加单独的独立事件事件直接发送到日历。

另一个选择是将事件添加到日历时，将事件附加到源。 Add Event documentation说

source代表您要关联此事件的事件源用。它可以是字符串事件源ID或事件源对象。重新获取源代码后，它将清除动态添加的提取之前从内部缓存获取事件。该参数是

因此，如果在声明事件源时给它一个ID，则可以在此处放置ID作为附加选项，以将事件与源相关联。像这样：

calendar.addEvent(event_object, 1);

fullcalendar版本4：refetch事件不会删除新添加的事件

1 个答案: