未在完整日历中显示事件

Question

我一直在尝试用fullcalendar显示一些事件，但它不起作用。我一直在谷歌上搜索并尝试不同的价值观，但从未奏效。例如，我尝试过这个：

events: [
{
title  : 'event1',
start  : '2020-04-01'
},
{
title  : 'event2',
start  : '2020-04-05',
end    : '2020-04-07'
},
{
title  : 'event3',
start  : '2020-04-03T12:30:00',
allDay : false // will make the time show
}
],

还有这个：

events: [
{"id":"1","start":"2020-04-14T13:00:00","end":"2020-04-14T1‌​6:00:00","title":"Pe‌​r Hour: 11.00,Per Mile: 11.00"},
{"id":"2","start":"2020-04-15T13:00:00","end":"2020-04-15T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"},
{"id":"3","start":"2020-04-16T13:00:00","end":"2020-04-16T16‌​:00:00","title":"Per Hour: 11.00,Per Mile: 11.00"}
]

以及其他测试。我测试的所有价值观都是在互联网上找到的，来自人们分享他们的经历，但对我来说，它们都不起作用。

你知道这些价值观出了什么问题吗？

然后我将编写一个脚本，从数据库中检索数据，但首先我必须使用硬编码的值。

---

我会尽量说得更清楚：我从完整的日历演示中复制/粘贴了这段代码，它运行良好，正确显示事件：

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeGrid' ],
timeZone: 'UTC',
defaultView: 'resourceTimeGridFourDay',
datesAboveResources: true,
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimeGridDay,resourceTimeGridFourDay'
},
views: {
resourceTimeGridFourDay: {
type: 'resourceTimeGrid',
duration: { days: 4 },
buttonText: '4 days'
}
},
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' }
],
events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});
calendar.render();  });

然后我评论了从fullcalendar网站检索事件的行，并添加了我自己的硬编码事件，如下所示：

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeGrid' ],
timeZone: 'UTC',
defaultView: 'resourceTimeGridFourDay',
datesAboveResources: true,
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimeGridDay,resourceTimeGridFourDay'
},
views: {
resourceTimeGridFourDay: {
type: 'resourceTimeGrid',
duration: { days: 4 },
buttonText: '4 days'
}
},
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' }
],
//events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
events: [
{
title  : 'event1',
start  : '2020-04-01'
},
{
title  : 'event2',
start  : '2020-04-05',
end    : '2020-04-07'
},
{
title  : 'event3',
start  : '2020-04-03T12:30:00',
allDay : false // will make the time show
}
]
});
calendar.render();  });

当我这样做时，事件不会显示。

Answer 1

感谢您的编辑。

原因现在更清楚了——您使用的是启用资源的视图，但您的事件没有任何匹配的资源ID。那么，你认为fullCalendar应该如何知道将它们放在哪个资源上呢？它无法决定，这意味着它无法显示事件。

您可以将事件分配给不同的资源，具体取决于它们所属的位置。像这样，例如：

events: [
{
title  : 'event1',
start  : '2020-04-01',
resourceId: 'b'
},
{
title  : 'event2',
start  : '2020-04-05',
end    : '2020-04-07',
resourceId: 'a'
},
{
title  : 'event3',
start  : '2020-04-03T12:30:00',
allDay : false, // will make the time show
resourceIds: ['a', 'b']
}
]

演示：https://codepen.io/ADyson82/pen/LYVoZvK?editable=true&editors=001

以下是相关的完整日历文档页面：将事件与资源关联