FullCalendar不显示通过使用动态'extraParams'参数通过JSON提取的事件

Question

我在处理通过动态'extraParams'参数通过JSON提取的事件时遇到问题，如Docs中所述：

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文档并未使这一事实特别清楚。

N.B。我认为在任何JSON响应中“ errors”属性都是多余的。如果发生错误，则应返回指示错误性质的HTTP状态代码，以及指示要告知用户有关错误的内容的完全不同的响应正文。这将在您的JS中触发“失败”回调，并允许浏览器代码正确响应。