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中的“失败”回调，并允许浏览器代码正确响应。

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

1 个答案: