Question

我正在使用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
          ]
        });
      }

    }
  }
}

我收到了这个错误

未捕获的TypeError：无法读取未定义的属性'hasTime'   在normalizeEventTimes（fullcalendar.js：12634）
  在normalizeEventDates（fullcalendar.js：12614）
  在assignDatesToEvent（fullcalendar.js：12605）
  在buildEventFromInput（fullcalendar.js：12589）
  at 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'}

Answer 1

第9次编辑 （！）

xhr.responseText返回 ONE 字符串...
FullCalendar需要array of objects。

因此，仅使用方括号xhr放置[]的字符串结果是不可取的。
它生成一个长度= 1（一个字符串）的数组。

解决方案是split此字符串，以便将我们用来创建某些对象的每个数据部分分开。

此处|已被用作分隔符，因为数据中已使用了逗号,。
这可以是收到的数据中不存在的任何字符。

然后，在split()创建的数组循环中使用JSON.parse()，我们创建对象......然后将它们放回到数组中。

最后一个数组最终将传递给FullCalendar的event选项。

// 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.
      });
    }
  }
}

如果您敢于阅读以下评论，您将看到导致此工作答案的所有调试步骤。
;）

Answer 2

最终代码：

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

        }
    }
}

未捕获的TypeError：无法读取未定义的属性'hasTime'

2 个答案: