在全日历 V4 中的下一个/上一个按钮上重新加载 API 数据

Question

我正在尝试使用以下代码从下一个/上一个按钮上的 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

这里的整体方法存在一些错误：

1. events: function(start, end, callback)不正确。这是完整日历 3 中的函数签名。在完整日历 4 中，它是function( fetchInfo, successCallback, failureCallback ).这从文档中非常清楚。如果您要从其他地方复制示例，请确保它们适用于正确的版本。

事件

2. 即函数的想法是使用提供的回调将事件返回到 fullCalendar。它不应用于添加和删除新的事件源。与简单地将事件数据直接返回到 fullCalendar 相比，这是非常低效的。方法应返回新获取的事件数据数组，以便它可用于提供回调。

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

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

附言：如果数据是从 API 异步获取的，那么fetchEventsByDate可能需要返回一个承诺 - 但这很好，因为 fullCalendar 可以使用它，只要承诺在解析时返回事件数据数组。像这样：

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功能都是多余的，可以删除。

附言当然可能还有其他错误，从显示的代码中看不出来，但不幸的是，在您的问题中，您只是将功能描述为"不起作用"，该描述根本没有提供任何有用的信息。因此，在缺乏对代码当前行为的任何准确描述的情况下，这可能提供有关特定问题根本原因的线索，我假设上述更改是使其达到预期所必需的。