FullCalendar 不显示通过带有动态“extraParams”参数的 JSON 获取的事件

Question

我在使用动态“extraParams”参数显示通过 JSON 获取的事件时遇到问题，如文档中所述：

var calendarEl = document.getElementById('calendar');

calendar = new FullCalendar.Calendar(calendarEl, {

...,

events: {

    url: '/getEvents',

    method: 'POST',

    extraParams: function() {

        var combobox = document.getElementById('combobox');

        var value = combobox.options[combobox.selectedIndex].value;

        return {client: value};

    },

    failure: function(error) {

        console.log(error);

        alert("Error", "Unable to fetch events", "red");

    },

},

...

});

calendar.render();

在调试面板上，我可以看到 FullCalendar 发出的请求：

XHR POST https://127.0.0.1:8443/getEvents

有了这个参数：

client: All

start: 2019-09-30T00:00:00Z

end: 2019-11-11T00:00:00Z

timeZone: UTC

和回应：

{

  "error": "", 

  "events": [

    {

      "allDay": 1, 

      "color": "blue", 

      "end": "2019-10-24T00:00:00.000Z", 

      "extendedProps": {

        "company": "Company 1", 

        "state": "Active", 

        "type": "task"

      }, 

      "groupId": "48", 

      "id": 27, 

      "start": "2019-10-23T00:00:00.000Z", 

      "title": "Title 1", 

      "url": ""

    }, 

    {

      "allDay": 1, 

      "color": "blue", 

      "end": "2019-11-07T00:00:00.000Z", 

      "endpoints": 0, 

      "extendedProps": {

        "company": "All", 

        "description": "Description", 

        "creationDate": "2019-11-04", 

        "state": "Active", 

        "tecnology": "test", 

        "element": "test 1", 

        "type": "type 2", 

        "user": "user 1", 

        "version": "1.2"

      }, 

      "id": 76, 

      "start": "2019-11-04T00:00:00.000Z", 

      "title": "Title 2", 

      "url": ""

    }

  ]

}

但是 FullCalendar 不显示这两个接收到的事件。我不知道我做错了什么。

问候。

Answer 1

发生这种情况是因为您的服务器必须返回一个仅包含事件的简单数组，而没有其他任何内容。您正在返回一个复杂的对象。FullCalendar 不知道如何解包您的对象并找到包含相关数据的“事件”属性。您需要简单地返回：[ {  "allDay": 1,   "color": "blue",   "end": "2019-10-24T00:00:00.000Z",   "extendedProps": {    "company": "Company 1",     "state": "Active",     "type": "task"  },   "groupId": "48",   "id": 27,   "start": "2019-10-23T00:00:00.000Z",   "title": "Title 1",   "url": "" },  {  "allDay": 1,   "color": "blue",   "end": "2019-11-07T00:00:00.000Z",   "endpoints": 0,   "extendedProps": {    "company": "All",     "description": "Description",     "creationDate": "2019-11-04",     "state": "Active",     "tecnology": "test",     "element": "test 1",     "type": "type 2",     "user": "user 1",     "version": "1.2"  },   "id": 76,   "start": "2019-11-04T00:00:00.000Z",   "title": "Title 2",   "url": "" }]从您的服务器，没有它的其余部分。我必须说 fullCalendar 文档并没有特别清楚地说明这一事实。注意，我认为“错误”属性无论如何都是多余的，在任何 JSON 响应中。如果出现错误，您应该返回一个指示错误性质的 HTTP 状态代码，以及一个完全不同的响应正文，指示您想告诉用户有关错误的任何内容。这将在您的 JS 中触发“失败”回调，并允许浏览器代码做出适当的响应。