FullCalendar - динамическое добавление событий не работает

Question

Динамические данные не добавляются к событиям в fullCalendar. Я использую AJAX для получения ответа и сохраняю его в своем массиве "events":

events: function () {
    var events = [];
    jQuery.ajax({
      url: '/employee/leave/2',
      type: 'GET',
      dataType: 'json',
      data: '',
      success: function (doc) {
        console.log(doc)

        if (doc != null) {
          events.push({
            id: doc.id,
            title: doc.reason,
            start: "2018-5-22",
            // end: doc.to_date
          });
        }
      }
    });
},

Answer 1

Это довольно просто, если вы точно и полностью следуете документации.

Описание в https://fullcalendar.io/docs/events-function проясняет, что функция событий имеет ряд важных параметров, переданных ей.

Параметры "start", "end" и "timezone" предназначены для отправки на сервер, чтобы ограничить результаты датами, фактически отображаемыми в календаре в настоящее время (fullcalendar сделает другой запрос к серверу). для большего количества событий, если пользователь перемещается в другой диапазон дат, например, в следующий месяц). Это технически необязательно, поэтому, если это не важно для вашего варианта использования, вы можете игнорировать их.

Однако параметр "обратного вызова" очень важен. Он содержит функцию, которую вы должны вызвать, когда вы извлекли свои события и передали ей список событий. Это механизм, с помощью которого вы передаете события, которые вы извлекли, в fullCalendar для их отображения. Если вы этого не сделаете, ничего не будет отображаться.

Так что просто измените свой код на это:

events: function( start, end, timezone, callback ) { //include the parameters fullCalendar supplies to you!

  var events = [];

  jQuery.ajax({
    url: '/employee/leave/2',
    type: 'GET',
    dataType: 'json',
    data: '',
    success: function (doc) {
      console.log(doc)

      if (doc != null) {
        events.push({
          id: doc.id,
          title: doc.reason,
          start: "2018-5-22",
          // end: doc.to_date
        });
      }

      callback(events); //you have to pass the list of events to fullCalendar!
    }
  });
},

P.S. В приведенном выше примере вы добавляете в календарь только одно событие, и вы предполагаете, что JSON включает только одно событие. Это может быть хорошо и то, что вы хотели, но это звучит немного маловероятно в реальной жизни, поэтому вы можете решить, является ли это хорошим подходом, или вам следует возвращать список событий с вашего сервера.