FullCalendar 不显示通过 JSON 和动态 'extraParams' 参数获取的事件

Question

我在显示通过 JSON 使用动态 'extraParams' 参数获取的事件时遇到问题，如 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

发生这种情况是因为您的服务器必须 return 一个仅包含事件的简单数组，没有其他内容。您正在 return 处理一个复杂的对象。 FullCalendar 不知道如何解压您的对象并找到包含相关数据的 "events" 属性。

您只需return：

[
 {
  "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。我认为 "errors" 属性在任何 JSON 响应中都是多余的。如果出现错误，您应该 return 一个指示错误性质的 HTTP 状态代码，以及一个完全不同的响应正文，指示您想告诉用户有关错误的任何信息。这将在您的 JS 中触发 "failure" 回调并允许浏览器代码做出适当的响应。

FullCalendar 不显示通过 JSON 和动态 'extraParams' 参数获取的事件

FullCalendar doesn't display events fetched via JSON with Dynamic 'extraParams' parameter

javascript

json

ajax

fullcalendar

fullcalendar-4