Я использую fullCalendar для отображения некоторых событий в календаре.

Сначала я выбираю события с помощью AJAX, а затем передаю их fullCalendar, как показано ниже:

$(document).ready(function() {

  getEvents();

});

function getEvents(){

  // Récupération des infos serveur
  var server_dns = $("#server_dns").html();

  // Envoi de la requête
  var xhr = new XMLHttpRequest();
  xhr.open("GET", server_dns+"/event");
  xhr.send("");

  // Attente de la réponse
  xhr.onreadystatechange = function(){
    if (xhr.readyState == xhr.DONE) {

      // Réponse correcte
      if(xhr.status == 200){

        console.log(xhr.responseText);

        $('#calendar').fullCalendar({
          events: [
            //{title  : 'event1',start  : '2017-05-28T12:30:00'},{title  : 'event2',start  : '2017-05-29T12:30:00'},{title  : 'event3',start  : '2017-08-30T12:30:00'},
            xhr.responseText
          ]
        });
      }

    }
  }
}

Я получил эту ошибку

Uncaught TypeError: Невозможно прочитать свойство 'hasTime' из неопределенного
at normalizeEventTimes (fullcalendar.js: 12634)
at normalizeEventDates (fullcalendar.js: 12614)
at assignDatesToEvent (fullcalendar.js: 12605)
at buildEventFromInput (fullcalendar.js: 12589)
на fullcalendar.js: 12180
в Function.map (jquery-3.1.1.js: 457)
на buildEventSource (fullcalendar.js: 12179)
в массиве. ( fullcalendar.js : 11835 )
в Function.each (jquery-3.1.1.js: 368)
на Calendar_constructor.EventManager (fullcalendar.js: 11832)

Я думаю, что мой JSON хорошо отформатирован, потому что консоль дает мне вывод:

{title: 'test',start: '2017-05-26T12:13:00'},{title: 'test',start: '2017-06-02T12:13:00'},{title: 'test',start: '2017-06-09T12:13:00'},{title: 'test',start: '2017-06-16T12:13:00'},{title: 'test',start: '2017-06-23T12:13:00'},{title: 'test',start: '2017-06-30T12:13:00'},{title: 'test',start: '2017-07-07T12:13:00'},{title: 'test',start: '2017-07-14T12:13:00'},{title: 'Test2',start: '1995-04-22T22:22:00'},{title: 'Test2',start: '1995-04-29T22:22:00'},{title: 'Test2',start: '1995-05-06T22:22:00'},{title: 'Test2',start: '1995-05-13T22:22:00'},{title: 'Test2',start: '1995-05-20T22:22:00'},{title: 'Test2',start: '1995-05-27T22:22:00'},{title: 'Test2',start: '1995-06-03T22:22:00'},{title: 'Test2',start: '1995-06-10T22:22:00'},{title: 'TEST3',start: '2017-05-27T12:00:00'},{title: 'TEST3',start: '2017-06-03T12:00:00'},{title: 'TEST3',start: '2017-06-10T12:00:00'},{title: 'TEST3',start: '2017-06-17T12:00:00'},{title: 'TEST3',start: '2017-06-24T12:00:00'},{title: 'TEST3',start: '2017-07-01T12:00:00'},{title: 'TEST3',start: '2017-07-08T12:00:00'},{title: 'TEST3',start: '2017-07-15T12:00:00'},{title: 'TEST3',start: '2017-07-22T12:00:00'},{title: 'TEST4',start: '2018-12-10T10:10:00'},{title: 'TEST4',start: '2018-12-17T10:10:00'}
0
flox95 27 Май 2017 в 21:51

2 ответа

Лучший ответ

9-я редакция (!)

xhr.responseText возвращает ОДНУ строку ...
А FullCalendar ожидает массив объектов.

Так что простого помещения результата строки из xhr в квадратные скобки [] недостаточно.
Это производит массив длины = 1 (одна строка).

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

Здесь | использовался в качестве разделителя, поскольку в данных уже использованы комы ,.
Это может быть любой персонаж, которого нет в полученных данных.

Затем с помощью JSON.parse() в цикле по массиву, созданному split(), мы создаем объекты ... и помещаем их обратно в массив.

Этот последний массив будет наконец передан в event опцию FullCalendar.

// Waiting Ajax response.
xhr.onreadystatechange = function(){
  if (xhr.readyState == xhr.DONE) {

    // Response OK.
    if(xhr.status == 200){

      // Visually check the response in console.
      console.log(xhr.responseText);

      // Split data.
      var splitted = xhr.responseText.split("|");

      // Create objects.
      var event_array=[];
      for(i=0;i<splitted.length;i++){

        // Push objects in the final array.
        event_array.push(JSON.parse(splitted[i]));
      }

      $('#calendar').fullCalendar({
        events: event_array           // Event are correctly passed to FullCalendar.
      });
    }
  }
}

Если вы осмелитесь прочитать комментарии ниже, вы увидите все этапы отладки, которые приведут к этому рабочему ответу.
; )

1
Louys Patrice Bessette 27 Май 2017 в 21:31

Финальный код:

$(document).ready(function() {

    getEvents();

});

function getEvents(){

    // Récupération des infos serveur
    var server_dns = $("#server_dns").html();

    // Envoi de la requête
    var xhr = new XMLHttpRequest();
    xhr.open("GET", server_dns+"/event");
    xhr.send("");

    // Attente de la réponse
    xhr.onreadystatechange = function(){
        if (xhr.readyState == xhr.DONE) {

            // Réponse correcte
            if(xhr.status == 200){

                console.log(xhr.responseText);
                var splitted = xhr.responseText.split("|");
                var event_array=[];
                for(i=0; i < splitted.length  ;i++){
                   event_array.push(JSON.parse(splitted[i]));
                 }
                console.log(event_array);

                $('#calendar').fullCalendar({
                    /* events: [
                            {
                              title: 'event 1',
                              start: '2017-05-26T12:13:00Z',
                              end: '2017-05-26T12:13:00Z',
                              color: 'tomato'
                            },
                          ]
                    */
                    events:  event_array
                });
                }

        }
    }
}
1
flox95 27 Май 2017 в 21:12