FullCalendar Doubling Events using JQuery

Question

您好，我在使用完整日历库时遇到问题。

只有当我点击自定义的"过滤器"按钮并更改月份时，事件才会翻倍。

当我调用过滤器时，我正在删除所有事件并使用过滤后的结果重新填充。问题看起来像当我点击左/右按钮时，它会再次调用事件填充并添加事件。我想禁用它或返工它。

以下是正在发生的事情： 在此处输入图像描述

日历代码：

function calendarView()
{
//$('#calendar').fullCalendar('removeEvents')
var url_str = "/Calendar/GetCalendarEvents"
$('#calendar').fullCalendar({
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
fixedWeekCount: true,
eventLimit: 4,
events: url_str,
eventClick: function (calEvent, jsEvent, view)
{
editable: false;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
if (calEvent.start >= currentDate - 1)
openEditVisit(calEvent.id)
}
});
};

过滤器按钮调用代码

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Calendar/GetCalendarEvents",
data: j,
async: false,
dataType: 'json',
success: function (data) 
{
$('#calendar').fullCalendar('removeEvents')
$('#calendar').fullCalendar('addEventSource', data)
},
error: function (xhr, err) {
alert("ERROR! - readyState: " + xhr.readyState + "<br/>status: " + xhr.status + "<br/>responseText: " + xhr.responseText);
}
});

Answer 1

您遇到了问题，因为由于您已经将事件定义为 JSON 提要 (events: url_str(，每当您更改视图时，它都会在没有过滤器选项的情况下获取这些事件。这是对之前作为单独事件源添加的筛选事件的补充。

因此，您可以使用的更好的解决方案是利用内置的事件即函数功能，并让您的自定义函数考虑 UI 中的过滤器选项，并将它们与 fullCalendar 提供的开始/结束日期一起发送到服务器。这将确保在更改视图或日期时，返回的结果会考虑您的筛选，并且不会重复事件。

同时，您的额外过滤器按钮可以在单击时调用"refetchEvents"，以从主事件源刷新，该主事件源已定义并使用过滤器选项。

见 https://fullcalendar.io/docs/event_data/events_function/