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，因为我认为它是某种缓存，但这似乎无法解决问题。

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

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过滤从Feed返回的事件：

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

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

换句话说：如果您在12月份有10个活动，请确保您在12月的时间段内仅返回这10个活动。您应该将开始/结束参数传递给json feed以减少发送回浏览器的数据，以便充分利用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);
    }
  });
}

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

4 个答案: