使用jquery fullCalendar时，为什么我在切换月份后会看到重复的事件？

我正在使用jquery fullCalendar插件 ，我遇到了一个奇怪的问题。

当我加载第一个月（在这种情况下2013年12月）它工作正常。 我调用我的ajax事件并返回一组事件。 我从我的服务器返回40个事件，我看到40个事件呈现。

然后我转到下个月（2014年1月），它也可以正常工作。 （来自服务器的41个事件和GUI中显示的41个事件）

然后我点击BACK返回到2013年12月，我得到了ajax事件，它返回相同的40个事件（如上所述），但是当日历加载时，它会看到12月份的每个事件都重复（GUI上显示80个事件），即使我只从服务器发回40，我在事件回调期间看到40。

这是我的代码：

$('#calendar').fullCalendar({ header: { left: 'prev,next title today', right: '' }, lazyFetching: false, editable: false, timeFormat: 'H:mm{-H:mm} ', viewDisplay: function (view) { ViewDisplay(); }, events: function (start, end, callback) { $('#Month').val($('#calendar').fullCalendar('getDate').getMonth() + 1); $("#Year").val($('#calendar').fullCalendar('getDate').getUTCFullYear()); var serializedFormInfo = $('#rotaForm').serialize(); $.ajax({ url: '/SupportRota/GetEvents/', dataType: 'json', cache: false, data: serializedFormInfo, success: function (data) { callback(data.RotaEvents); } }); } }); 

我尝试添加lazyLoading：false，因为我认为它是某种缓存，但这似乎并没有解决问题。

我在萤火虫上放了一个断点

 callback(data.RotaEvents) 

我看到40个事件，但在上述场景中屏幕上会显示80个事件。

有什么建议吗？

Answer 1

也许是一个“硬核”答案，但很简单：我认为事件可以在浏览器中缓存并解释为什么你有重复。

只需在ajax调用之前添加此行：

 $('.fc-event').remove(); 

您不必担心此事件是否已经呈现，并且在加载方面可能更快。

Answer 2

如果事件已设置为

 $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

（如我发现的示例中）您可能希望使用以下命令指定事件创建：

 $('#calendar').fullCalendar('renderEvent', copiedEventObject, false); 

false会使事件“不粘”（这是默认行为;您也可以只删除true）并允许事件在日历重新获取事件时消失 – 这样做对我来说:-)

Answer 3

您需要根据开始/结束参数结合LazyLoading过滤从Feed返回的事件：

设置为true（默认值）时，日历将仅在绝对需要时获取事件，从而最大限度地减少AJAX调用。 例如，假设您的日历在二月的月视图中开始。 FullCalendar将获取整月2月的事件并将其存储在其内部缓存中。 然后，假设用户切换到周视图并开始浏览二月份的周。 日历将避免提取事件，因为它已经存储了此信息。

如果无论时间段如何都返回所有事件，您将在加载的每个新时间段内获得重复项。 （对于您显示的每个新月）。

换句话说：如果您在12月份举办了10场比赛，请确保您在12月的时间段内仅返回这10场比赛。 您应该将开始/结束参数传递给json feed以减少发送回浏览器的数据，以便充分利用LazyLoadingfunction。

Answer 4

我想，你可以避免重新加载重复的事件：

 events: function (start, end, callback) { $('#Month').val($('#calendar').fullCalendar('getDate').getMonth() + 1); $("#Year").val($('#calendar').fullCalendar('getDate').getUTCFullYear()); if (this.eventsDone && this.eventsDone[start + end]) { return; } var serializedFormInfo = $('#rotaForm').serialize(); $.ajax({ url: '/SupportRota/GetEvents/', dataType: 'json', cache: false, context: this, data: serializedFormInfo, success: function (data) { if (!this.eventsDone) { this.eventsDone = {}; } this.eventsDone[start + end] = true; callback(data.RotaEvents); } }); }