CODEWITHSUNDEEP
javascripttypescriptfullcalendarfullcalendar-4
MVM
MVM

Reputation: 127

FullCalendar-v4 allDay events not rendering

I have managed to get my recurring events to show up on the calendar, but my single allDay events will not render and I believe its a field problem.

I've tried making the event's start time an iso date which doesn't seem to matter as my recurring events are being saved as a string.

This is a recurring event and shows up on the calendar

{
    "_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
}

this is a single event that showed up in FC-v3 but wont in 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
}

so i made an event with the proper ISO Date and it failed as well

{
    "_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 code

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

Upvotes: 1

Views: 779

Answers (1)

ADyson
ADyson

Reputation: 61859

setting "daysOfWeek" : [], means that you are telling the calendar it cannot show the event on any day of the week. That's why it won't appear.

Simply don't set that option in your code for single events, and it will be fine:

{
    "_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
}

Demo: https://codepen.io/ADyson82/pen/LwdgeG

P.S. There's nothing wrong with your date string.

Upvotes: 3

Related Questions