javascript - FullCalendar 不显示通过带有动态“extraParams”参数的 JSON 获取的事件
问题描述
我在显示通过带有动态“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 不显示这两个收到的事件。我不知道我做错了什么。
问候。
解决方案
发生这种情况是因为您的服务器必须返回一个仅包含事件的简单数组,而没有其他内容。您正在返回一个复杂的对象。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 中触发“失败”回调,并允许浏览器代码做出适当的响应。
推荐阅读
- html - 同一页面上的多个超链接
- .net - 检测 HorizontalAlignment 或 VerticalAlignment 的变化
- ggplot2 - 使用 pyspark+databricks 时如何绘制相关热图
- f# - 没有为在 Visual Studio 2017 中创建 Windows 窗体的 F# 定义命名空间“窗体”
- nearest-neighbor - 如何在 ONE 模拟器中向无线范围内的所有邻居发送投标消息?
- javascript - 无法将复选框设置为选中 - 与 DOM 加载相关,
- css - VueJS:禁用任何全局 CSS,只允许组件中的范围 CSS
- c++ - 将整数解释为字节数组的安全性
- f# - Excel Dna / F#中的多态性
- java - 在布局中动态插入图像