Issue with FullCalendar-v4 not displaying all-day events

I am facing an issue with my calendar where recurring events are displaying correctly, but single allDay events are not rendering, and I suspect it may be a field problem.

I've attempted to set the event's start time as an iso date, but it doesn't seem to make a difference as my recurring events are being saved as a string.

Here is an example of a recurring event that 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
}

On the other hand, here is an example of a single event that showed up in FC-v3 but doesn't 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
}

Even after creating an event with the proper ISO Date, it failed to render:

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

Here is a snippet of the 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
javascripttypescriptfullcalendarfullcalendar-4

Answer №1

When you set "daysOfWeek" : [], in the code, you are essentially informing the calendar not to display the event on any day of the week. This is why the event does not show up.

To resolve this, simply avoid setting that option for single events in your code:

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

Check out the demo here: https://codepen.io/ADyson82/pen/LwdgeG

P.S. Your date string is perfectly fine - no issues there.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to arrange cards in a specific order with breaks in between each flip

I am currently working on creating flip cards using HTML and CSS. I have successfully implemented the hover effect which flips the cards when hovered over. Now, my goal is to make the cards automatically flip one after the other at specific time intervals ...

javascripthtmlcss

Determining whether a variable is an instance of FirebaseApp

I'm working with this simple codebase import { FirebaseApp, FirebaseOptions } from "firebase/app"; function example(app){ // error: FirebaseApp only refers to a type console.log(app instanceof FirebaseApp) } In this scenario, the Firebase ...

typescriptfirebase

Unable to host Express app on Firebase functions emulator due to a port conflict with error code EADDRINUSE: address already in use :::3000

Testing the deployment of an express app on Firebase using Firebase functions has presented a challenge for me. Upon running the command firebase serve, I encountered the error EADDRINUSE: address already in use :::3000. Below is my index.js file: const fu ...

javascriptnode.jsfirebaseexpressgoogle-cloud-functions

What is the best way to store images in a directory using JavaScript and ASP.NET?

How can I upload and save an image in a folder using ASP.NET, then call and display it? Is it possible to achieve this using AJAX, jQuery, or JavaScript with Web Method? <asp:FileUpload CssClass="image" ID="fileUpload" runat="server" /> I currently ...

javascriptc#jqueryajaxweb-services

HTML dropdown menu to trigger an action with the submitted URL

I need assistance creating a menu of options with corresponding URL actions. Here is the structure I have in mind: <form> <select> <option value="1">1</option> <option value="2">2</option> <option value="3 ...

javascripthtml

All Event Monitor

Is it possible to use Event Listeners in jQuery to display information when a specific word is clicked? For example, showing a definition when a word is clicked. Thanks, Adam. I need help with creating a feature where clicking on a person's name in a ...

javascriptjqueryjsonajaxevent-handling

What measures can I take to protect the use of React components that may not be present?

For my project, I am planning to receive icons/svgs as react components from a folder created by the backend. Additionally, there will be a WAMP (bonefish/autobahn) solution where I will be provided with the name of an icon to use (even though this may see ...

reactjstypescriptreact-typescript

Testing HTTP requests on a form click in Vue.js 2 - Let's see how

Within my component, I have the following method: methods:{ ContactUs(){ this.$http.post("/api/contact-us").then((res)=>{ ///do new stuff },(err)=>{ //do new stuff }) ...

javascriptunit-testingvue.jsjestjs

Filling a HTML div with data through PageMethods and AJAX

My issue is quite unique. Despite checking numerous examples before reaching out here, I am facing a peculiar problem. I have a div element in my ASPX file and I am using AJAX to send a POST request to populate it. <script> function send(input ...

javascriptjquery.netajax

Access JSON value using jQuery by key

Creating a JSON structure that contains information about attendees: { "attendees": [ { "datum": "Tue, 11 Apr 2017 00:00:00 GMT", "name": " Muylaert-Geleir", "prename": "Alexander" }, { "datum": "Wed, 12 Apr 2017 ...

javascriptjqueryjson

Dynamically loading a JSON file in JavaScript

Can you please review this code snippet? var scripts = {}; require = function(src){ var id = Math.round(+new Date()/1000); $.ajax({ url: src + '.json', type: 'GET', dataType: "json", cache: ...

javascriptjsonjquery

How to connect a form component object with a parent object in Vue3 using v-model and the Options API?

My inquiry is quite straightforward. I am exploring the official Vue documentation that delves into v-model arguments in relation to forms within a child component. Here is the code snippet I am referring to: (App.Vue) <script> import UserName from & ...

typescriptvue.jsvuejs3vue-componentvue-options-api

Mongoose Alert Utility Directive

const mongoose = require('mongoose'); module.exports = { init: () => { const dbOptions = { useNewUrlParser: true, useUnifiedTopology: true, autoIndex: false, reconnectTries: Number.MA ...

javascriptnode.jsdatabasemongodb

Conceal any elements designated by a particular class and reveal them based on their corresponding ID

I have utilized jQuery's hide() function to initially hide all elements of a specific class when the page loads. My goal is to make individual elements visible again based on their unique IDs when a corresponding link is clicked. In total, there are ...

javascriptjqueryjquery-selectorsshow-hide

Transforming mp4 or Avi files into m3u8 using only node js

I'm currently exploring ways to convert a mp4 or .avi file to .m3u8 using pure node js (specifically, a Firebase Cloud Function). Does anyone have any suggestions? Thank you, but I've already attempted the following: const ffmpegInstaller = requ ...

javascriptnode.jsgoogle-cloud-functionsmp4m3u8

Is there a way to manipulate a DOM element using a component?

import { FlagIcon, ChartIcon, ShareIcon, ConnectIcon, HearIcon, AnalyticsIcon, AddIcon, RemoveIcon, } from "../../icons/Icons"; import "./Sidebar.scss"; import ReactDOM from "react-dom"; const Sidebar = () =&g ...

javascriptreactjsdom

Issue with ambient contexts error in TypeScript constructor

What is the correct way to create a constructor in TypeScript? I have been researching and trying different approaches, but it seems like the syntax has changed. Here is my latest attempt: car.d.ts declare class Car { constructor(public engine: string ...

syntaxtypescript

How can I redirect to a different URL using Ajax when successful POST request is made?

Here is the code snippet I am working with: $.ajax({ type: "POST", url: "/pro_signup", data: { data: data, key: key }, dataType: "json", success: function (response) { document.getElementById("pu ...

javascriptajax

express.js and socket.io compatibility perplexity

Server-Side Code: var server = require("http").Server(express); var io = require("socket.io")(server); server.listen(5000); io.on('connection', function(client) { client.on('order', function(data) { io.emit('place_orde ...

javascriptnode.jsexpresssocket.io

Cufon failing to load following an ajax call

At first, cufon is used to replace the text on the main page. However, when another page file is loaded, cufon does not apply its replacement to the newly loaded content. Why is that? I tried adding cufon.refresh(); as the last function in the chain. I c ...

javascriptjqueryajaxfontscufon