未在完整日历中显示的事件
Events not displayed in full calendar
我一直在尝试使用全日历显示一些事件,但它不起作用。
我一直在谷歌搜索并尝试不同的价值观,但它从来没有奏效。
例如我试过这个:
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-14T16:00:00","title":"Per 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"}
]
以及其他测试。我测试的所有价值观都是在互联网上找到的,来自人们分享他们的经验,但对我来说 none 有效。
知道这些值有什么问题吗?
然后我将编写将从我的数据库中检索数据的脚本,但首先我必须使其使用硬编码值。
我会尽量说得更清楚:
我从完整的日历演示中复制/粘贴了这段代码,它工作正常,可以正确显示事件:
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(); });
然后我评论了从全日历网站检索事件的行并添加了我自己的硬编码事件,如下所示:
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(); });
当我这样做时,事件没有显示。
感谢您的编辑。
原因现在更清楚了 - 您正在使用启用资源的视图,但您的事件没有任何匹配的资源 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
这里是相关的 fullCalendar 文档页面:Associating Events with Resources
我一直在尝试使用全日历显示一些事件,但它不起作用。 我一直在谷歌搜索并尝试不同的价值观,但它从来没有奏效。 例如我试过这个:
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-14T16:00:00","title":"Per 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"}
]
以及其他测试。我测试的所有价值观都是在互联网上找到的,来自人们分享他们的经验,但对我来说 none 有效。
知道这些值有什么问题吗?
然后我将编写将从我的数据库中检索数据的脚本,但首先我必须使其使用硬编码值。
我会尽量说得更清楚: 我从完整的日历演示中复制/粘贴了这段代码,它工作正常,可以正确显示事件:
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(); });
然后我评论了从全日历网站检索事件的行并添加了我自己的硬编码事件,如下所示:
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(); });
当我这样做时,事件没有显示。
感谢您的编辑。
原因现在更清楚了 - 您正在使用启用资源的视图,但您的事件没有任何匹配的资源 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
这里是相关的 fullCalendar 文档页面:Associating Events with Resources