javascript - 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 文档并没有使这个事实特别清楚。

注意我认为无论如何，在任何 JSON 响应中，“errors”属性都是多余的。如果出现错误，您应该返回一个表明错误性质的 HTTP 状态代码，以及一个完全不同的响应主体，表明您想告诉用户有关错误的任何内容。这会在您的 JS 中触发“失败”回调，并允许浏览器代码做出适当的响应。