Uncaught TypeError: Cannot read property 'hasTime' of undefined

Question

I'm using fullCalendar in order to display some events in a calendar.

I'm first fetching the events with AJAX and then giving it to fullCalendar like below :

$(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
          ]
        });
      }

    }
  }
}

I got this error

Uncaught TypeError: Cannot read property 'hasTime' of undefined
  at normalizeEventTimes (fullcalendar.js:12634)
  at normalizeEventDates (fullcalendar.js:12614)
  at assignDatesToEvent (fullcalendar.js:12605)
  at buildEventFromInput (fullcalendar.js:12589)
  at fullcalendar.js:12180
  at Function.map (jquery-3.1.1.js:457)
  at buildEventSource (fullcalendar.js:12179)
  at Array. (fullcalendar.js:11835)
  at Function.each (jquery-3.1.1.js:368)
  at Calendar_constructor.EventManager (fullcalendar.js:11832)

I think my JSON is well formatted because the console gives me output:

{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'}

Answer 1

9th EDIT (!)

xhr.responseText returns ONE string...
And FullCalendar expects an array of objects.

So just placing the string result from xhr withing square brackets [] is not enought.
It produces an array of length = 1 (one string).

The solution is to split this string in order to separate each data parts that we'll use to create some objects.

Here the | has been used as a separator, since comas , are already used in the data.
This can be any chracter which is not present in the data received.

Then, using JSON.parse() in a loop through the array created by split(), we create the objects... And put them back in an array.

This last array will finally be passed to the event option of 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.
      });
    }
  }
}

If you dare reading the below comments, you'll see all debuging steps which lead to this working answer.
;)

Answer 2

Final code :

$(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
                });
                }

        }
    }
}