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

Question

我是 using jquery fullCalendar plugin，我遇到了一个奇怪的问题。

当我加载第一个月（在这种情况下为 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，因为我认为这是某种缓存，但这似乎并不能解决问题。

我在firebug中放了一个断点就行了

callback(data.RotaEvents)

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

有什么建议吗？

Answer 1

如果事件是用

设置的

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

（在我找到的示例中）您可能希望指定事件创建：

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

false 使事件“不粘”（这是默认行为；您也可以放弃 true），并且在日历重新获取事件时允许事件消失 - 这对我来说是这样的：-)

Answer 2

也许是一个“铁杆”的答案，但很简单：我认为这些事件可能会缓存在浏览器中并解释为什么你有重复。

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

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

您不必担心此事件是否已经渲染，加载速度可能更快。

Answer 3

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

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

如果您在不考虑时间段的情况下返回所有事件，您将在加载的每个新时间段获得重复项。 （对于您显示的每个新月份）。

换句话说：如果您在 12 月有 10 个事件，请确保仅在时间段为 12 月时返回这 10 个事件。您应该将开始/结束参数传递给您的 json 提要，以减少发送回浏览器的数据，并充分利用 LazyLoading 功能。

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);
    }
  });
}