FullCalendar-v4 allDay 事件未呈现

Question

我已经设法让我的重复事件显示在日历上，但是我的单个全天事件不会呈现，我认为这是一个现场问题。

我尝试将事件的开始时间设置为 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

Answer 1

设置 "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

P.S。你的日期字符串没有问题。

FullCalendar-v4 allDay 事件未呈现

FullCalendar-v4 allDay events not rendering

javascript

typescript

fullcalendar

fullcalendar-4