在 fullcalendar v4 中的 next/prev 按钮上重新加载 api 数据

Question

我正在尝试使用以下代码从 next/prev 按钮上的 API 获取 json 数据，但它在我们第二次按下按钮时不起作用我的代码如下

var calendarEl = document.getElementById('calendar');
        $scope.calendarObj = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid','interactionPlugin' ],
            header: {
                left: 'prev,next, today',
                center: 'title',
                right: 'timeGridDay,timeGridWeek,dayGridMonth'
            },
            // defaultDate: '2020-06-18', if null, it will fetch current day.
            nextDayThreshold: '00:00:00',
            slotDuration: '00:15:00',
            defaultView: 'timeGridDay',
            lazyFetching : false,
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectMirror: true,
            select: function(arg) {
                var title = prompt('Event Title:');
                if (title) {
                    $scope.calendarObj.addEvent({
                        title: title,
                        start: arg.start,
                        end: arg.end,
                        allDay: arg.allDay
                    })
                }
                $scope.calendarObj.unselect()
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: function(start, end, callback) {
                fetchEventsByDate(start.start,start.end) //  used to call json api and fetch the data
            },
            dateClick: onEmptySlotClick,
        });
        $scope.calendarObj.render();

在 fetchEventsByDate 方法中，我调用了以下方法来显示日历中的数据。

$scope.refresh_events = function () {
    var eventSources = $scope.calendarObj.getEventSources();
    var len = eventSources.length;
    for (var i = 0; i < len; i++) {
        console.log(eventSources[i])
        eventSources[i].remove();
    }
    $scope.calendarObj.addEventSource( $scope.events );
    $scope.calendarObj.render();
};

但它不起作用。可以请任何人指导我，我做错了什么。

Answer 1

你这里的整体方法有一些错误：

events: function(start, end, callback) 不正确。这是 fullCalendar 3 中的函数签名。在 fullcalendar 4 中是 function( fetchInfo, successCallback, failureCallback )。从 documentation 中可以看出这一点。如果您从其他地方复制示例，请确保它们适用于正确的版本。
事件即函数的想法是使用提供的回调 return 事件到 fullCalendar。它不应该用于添加和删除新的事件源。与直接 return 将事件数据直接发送到 fullCalendar 相比，这是非常低效的。您的 fetchEventsByDate 方法应该 return 新获取的事件数据数组，因此它可用于提供回调。

您的事件函数将如下所示：

events: function( fetchInfo, successCallback, failureCallback ) {
  successCallback(fetchEventsByDate(fetchInfo.start,fetchInfo.end)); //  used to call json api and fetch the data
}

P.S。如果数据是从 API 异步获取的，那么 fetchEventsByDate 到 return 可能需要一个 Promise - 但这很好，因为 fullCalendar 可以使用它，只要 promise returns 解析时的事件数据数组。像这样：

events: function( fetchInfo, successCallback, failureCallback ) {
  var promise = fetchEventsByDate(fetchInfo.start,fetchInfo.end); //  used to call json api and fetch the data
  return promise;
}

在任何一种情况下，您的整个 $scope.refresh_events 函数都将是多余的并且可以被删除。

P.S。当然可能还有其他错误，这些错误在显示的代码中并不明显，但不幸的是，在您的问题中，您只是将功能描述为“不工作”，这种描述根本没有提供任何有用的信息。因此，在没有任何可能提供特定问题根本原因线索的代码当前行为的准确描述的情况下，我假设上述更改是使其按预期进行的所有必要更改。

在 fullcalendar v4 中的 next/prev 按钮上重新加载 api 数据

reload api data on next/prev buttons in fullcalendar v4

javascript

fullcalendar

fullcalendar-4