javascript - FullCalendar-v4 allDay 事件未呈现
问题描述
我已经设法让我的经常性事件显示在日历上,但是我的单个 allDay 事件不会呈现,我相信这是一个现场问题。
我尝试将事件的开始时间设置为 iso 日期,这似乎无关紧要,因为我的重复事件被保存为字符串。
这是一个经常发生的事件,并显示在日历上
{
"_id" : ObjectId("5d4af079f91ff532f8fc0385"),
"daysOfWeek" : [
1,
2,
3
],
"locationId" : ObjectId("5d28cad23f49646797e05adc"),
"allDay" : true,
"start" : "2019-08-07",
"end" : "2019-08-07",
"startRecur" : "2019-08-07",
"endRecur" : "2019-08-31",
"title" : "Change Bulbs",
"backgroundColor" : "rgb(87, 87, 244)",
"source" : null,
"interval" : "Weekly",
"category" : "Facility",
"monday" : true,
"tuesday" : true,
"wednesday" : true,
"completed" : false,
"frequency" : null,
"__v" : 0
}
这是一个在 FC-v3 中出现但不会在 v4 中出现的单一事件
{
"_id" : ObjectId("5d4b455e121f726f510f2b5c"),
"daysOfWeek" : [],
"batchId" : ObjectId("5d28f52d823083adfc6e8c4d"),
"locationId" : ObjectId("5d28cad23f49646797e05adc"),
"end" : null,
"startRecur" : "",
"endRecur" : "",
"allDay" : true,
"start" : "2019-08-08",
"title" : "First Transplant",
"backgroundColor" : "rgb(87, 87, 244)",
"interval" : "Single Event",
"category" : "Cultivation",
"monday" : false,
"tuesday" : false,
"wednesday" : false,
"thursday" : false,
"friday" : false,
"saturday" : false,
"sunday" : false,
"completed" : false,
"__v" : 0
}
所以我用正确的 ISO 日期做了一个事件,它也失败了
{
"_id" : ObjectId("5d4b4f9a56114f747c7ddcef"),
"daysOfWeek" : [],
"batchId" : ObjectId("5d28f52d823083adfc6e8c4d"),
"locationId" : ObjectId("5d28cad23f49646797e05adc"),
"allDay" : true,
"start" : ISODate("2019-08-08T00:00:00.000Z"),
"end" : null,
"title" : "IMP",
"backgroundColor" : "rgb(87, 87, 244)",
"interval" : "Single Event",
"category" : "Cultivation",
"monday" : false,
"tuesday" : false,
"wednesday" : false,
"thursday" : false,
"friday" : false,
"saturday" : false,
"sunday" : false,
"completed" : false,
"__v" : 0
}
comp.ts 代码
createEvent(form) {
if (form.valid) {
this.newEvent.category = 'Cultivation';
this.newEvent.completed = false;
this.newEvent.allDay = true;
this.newEvent.locationId = this.selectedLocation._id;
this.newEvent.batchId = this.selectedBatch._id;
this.newEvent.start = moment(this.newEvent.start).utc();
this.newEvent.start.hours(0).minutes(0).seconds(0);
// this.newEvent.source = null;
// this.newEvent.daysOfWeek = [];
if (this.newEvent.interval === 'Single Event') {
this.newEvent.end = null;
// this.newEvent.startRecur = '';
// this.newEvent.endRecur = '';
this.newEvent.monday = false;
this.newEvent.tuesday = false;
this.newEvent.wednesday = false;
this.newEvent.thursday = false;
this.newEvent.friday = false;
this.newEvent.saturday = false;
this.newEvent.sunday = false;
}
// if ( this.newEvent.interval === 'Daily' || this.newEvent.interval === 'Weekly'){
// }
if (this.newEvent.interval === 'Weekly') {
this.newEvent.startRecur = this.newEvent.start;
this.newEvent.end = this.newEvent.start;
this.newEvent.frequency = NaN;
if (this.newEvent.sunday) {
this.newEvent.daysOfWeek.push(0);
}
if (this.newEvent.monday) {
this.newEvent.daysOfWeek.push(1);
}
if (this.newEvent.tuesday) {
this.newEvent.daysOfWeek.push(2);
}
if (this.newEvent.wednesday) {
this.newEvent.daysOfWeek.push(3);
}
if (this.newEvent.thursday) {
this.newEvent.daysOfWeek.push(4);
}
if (this.newEvent.friday) {
this.newEvent.daysOfWeek.push(5);
}
if (this.newEvent.saturday) {
this.newEvent.daysOfWeek.push(6);
}
}
...sub to database
解决方案
设置"daysOfWeek" : [],
意味着您告诉日历它不能在一周中的任何一天显示事件。这就是它不会出现的原因。
只需不要在代码中为单个事件设置该选项,就可以了:
{
"_id" : ObjectId("5d4b455e121f726f510f2b5c"),
"batchId" : ObjectId("5d28f52d823083adfc6e8c4d"),
"locationId" : ObjectId("5d28cad23f49646797e05adc"),
"end" : null,
"startRecur" : "",
"endRecur" : "",
"allDay" : true,
"start" : "2019-08-08",
"title" : "First Transplant",
"backgroundColor" : "rgb(87, 87, 244)",
"interval" : "Single Event",
"category" : "Cultivation",
"monday" : false,
"tuesday" : false,
"wednesday" : false,
"thursday" : false,
"friday" : false,
"saturday" : false,
"sunday" : false,
"completed" : false,
"__v" : 0
}
演示:https ://codepen.io/ADyson82/pen/LwdgeG
PS 你的日期字符串没有问题。
推荐阅读
- java - 将前导零添加到转换后的 Integer Java
- python - Tkinter 画布 (FigureCanvasTkAgg) bbox 给出 None
- visual-studio-code - 如何在 Visual Studio Code 中为 resolveCodeLens 提供参数?
- ggplot2 - 我可以移动 ggplot 的轴以使 R 中的数据居中吗
- python-3.x - 向 GeoDataFrame 添加新列,它说值的长度与索引不匹配
- c# - WPF LIstBox 刷新冻结 UI
- javascript - 没有javascript的自定义无线电输入的tabindex?
- typescript - 如何使用字符串参数将对象的道具名称更改为对象
- angular - TypeScript:在 webworker 中创建屏幕外画布
- laravel - 如何在 laravel 的邮递员中发送图像