FullCalendar отображает только события, которые не отображаются в настоящее время

Question

У меня есть веб-приложение, которое использует fullcalendar.io. У меня только одно событие в день максимум. Моя проблема заключается в том, что каждый раз, когда события извлекаются, он извлекает все события, и это приводит к повторному рендерингу всех событий за месяц (по крайней мере). Я не хочу обновлять существующие (в клиентских) событиях!

Почему это плохо? Ну, это плохо, потому что FullCalendar запрограммирован таким образом, чтобы он сначала скрывал/удалял события клиентов, показывая, а затем ждет, пока выборка не будет выполнена, а затем повторно отобразит все события. Это приводит к ситуации, когда почти в течение секунды календарный месяц показывает пустым, пока он не отображает события. Я бы хотел, чтобы он вел себя так: календарь должен отображать только те события, которые в настоящий момент не отображаются в этом видимом месяце. Затем, когда он возвращается, он только повторно отображает те новые события.

Как я пытался добиться этого заключается в следующем:

 events: { 
     data: function() { 
     return { 
      dynamic_value: JSON.stringify({myarray:$('#calendar').fullCalendar('clientEvents')}) 
     }; 
     }, 
     url: '/calendar/events', 
    } 

То, что я пытался сделать, чтобы установить динамический параметр, где я должен поставить все на стороне клиента события. А затем в серверном бэкэнде я бы только отправил события, которые не включены в этот параметр. Проблема в том, что если я назову fullCalendar ('clientEvents') в этом месте (внутри объекта events), это приведет к пусту массива. Итак, как я могу дать объекту events параметр, указывающий, что он должен только получать новые события? Или я приближаюсь к этому неправильно с самого начала?

Answer 1

Даже если бы я нашел способ (я действительно сделал) передать старые события в dynamic_value (параметр), это не решило бы настоящую проблему.

И почему? Это потому, что я использовал повторный показ для отображения событий. Я посмотрел под капот функции FullCalendar refetching, и он делает то, что он сначала удаляет все события из календаря, а затем начинает получать новые события. И во время этой выборки ajax календарь останется пустым. Так что это не помогло бы мне, даже если бы я установил старые события в качестве пареметра, а затем применил фильтрацию серверов.

Но, к счастью, я смог решить настоящую проблему. Я продолжал получать все события (я мог бы изменить его в будущем, хотя), но мне удалось избежать этой проблемы. Я сделал то, что я (снова) смотрел под капот. Я понял, что в FullCalendar существует много не документированных функций, которые можно использовать через api. Одна из них - функция fetchEvents (используется функцией refetchEvents). Функция fetchEvents выполняет только выборку и не удаляет старые события. Так что я сделал, что вместо того, чтобы использовать reFetchEvents, я использовал:

 $('#calendar').fullCalendar(
     'fetchEvents', 
     $('#calendar').fullCalendar('getView').start, 
     $('#calendar').fullCalendar('getView').end 
); 

Функция fetchEvents просто необходимо начало и конец, как PARAMATERS. Я смог получить их, указав, как функция fetchEvents используется функцией refetchEvents, и там они получили начало и конец функции getView. Я смог использовать функцию getView, как показано выше.

Но это только половина решения. Конечно, я должен как-то удалить старые события календаря в нужном месте. Ну, для этого мне посчастливилось найти также функцию, которая может быть использована через api (даже не документирована). Мне пришлось изменить конфигурацию части событий в моем полном календаре. Вместо простого URL-адреса json feed я изменил его на ajax-спецификацию с помощью функции успеха, чтобы я мог на месте уничтожить старые события.Так что теперь разрушив часть происходит только после того, как ответ AJAX, который сделает уничтожить, чтобы сделать процесс быстро:

 events: function(start, end, timezone, callback) { 
     $.ajax({ 
      url: '/calendar/events', 
      dataType: 'json', 
      data: { 
      start: start.unix(), 
      end: end.unix() 
      }, 
      success: function(doc) { 
      var events = []; 
      doc.forEach(function(eventObject) { 
       events.push({ 
        title: eventObject.title, 
        start: eventObject.start, 
        user: eventObject.user, 
        allDay: eventObject.allDay, 
        overlap: eventObject.overlap, 
        created: eventObject.created 
       }); 
      }); 
      $('#calendar').fullCalendar('destroyEvents'); 
      callback(events); 
     } 
    }); 

}

Как вы можете видеть выше, я использую fullCalendar destroyEvents перед отправкой новых событий для обработки обратного вызова. И это решило пустой календарь во время ajax-звонка.