При использовании jquery fullCalendar, почему я вижу повторяющиеся события после переключения месяцев?

Я используя плагин jQuery fullCalendar, и у меня возникает странная проблема.

Когда я загружаю первый месяц (декабрь 2013 года в этом случае), он работает нормально. Я вызываю событие ajax и возвращаю набор событий. Я возвращаю 40 событий с моего сервера и вижу 40 событий.

Затем я перехожу к следующему месяцу (январь 2014 года), и он также отлично работает. (41 событие с сервера и 41 событие отображаются в графическом интерфейсе)

Затем я нажимаю BACK, чтобы вернуться к декабрю 2013 года, и я получаю событие ajax, которое возвращает те же 40 событий (как указано выше), но при загрузке календаря он видит каждое событие в декабре, дублируемое (в графическом интерфейсе отображаются 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 событий появляются на экране во время описанного выше сценария.

Любое предложение?

Ответ 1

Может быть, "хардкорный" ответ, но простой: я думаю, что события могут быть кэшированы в браузере и объяснить, почему у вас есть дубликаты.

Просто добавьте эту строку перед вызовом ajax:

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

Вам не нужно беспокоиться о том, если это событие уже выполнено или нет, и это может быть быстрее с точки зрения загрузки.

Ответ 2

Если событие было настроено с помощью

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

(как в примере, который я нашел), вы можете указать создание события с помощью:

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

ложное делает событие "неустойчивым" (которое по умолчанию является поведением, вы также можете просто отбросить значение true) и позволит событию исчезнуть, когда календарь повторяет события - это сделало это для меня: -)

Ответ 3

Вам нужно отфильтровать события, которые вы возвращаете из своего канала, на основе аргументов start/end в сочетании с LazyLoading:

Если установлено значение true (по умолчанию), календарь будет получать только события, когда это абсолютно необходимо, минимизируя вызовы AJAX. Например, скажите, что ваш календарь начинается в месяц, в феврале. FullCalendar будет получать события в течение всего месяца февраля и хранить их во внутреннем кеше. Затем скажите, что пользователь переключается на недельный режим и начинает просмотр недель в феврале. Календарь будет избегать сбора событий, поскольку он уже хранит эту информацию.

Если вы возвращаете все события независимо от периода времени, вы получите дубликаты для каждого нового периода времени, который вы загружаете. (За каждый новый месяц, который вы показываете).

Другими словами: если в декабре у вас 10 событий, убедитесь, что вы возвращаете эти 10 событий только в том случае, если период времени - декабрь. Вы должны передать начальные/конечные паразиты в ваш json-канал, чтобы уменьшить данные, отправленные обратно в браузер, а также для максимальной отдачи от функции LazyLoading.

Ответ 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);
    }
  });
}