Encountered issue when attempting to insert items into the list in EventInput array within FullCalendar and Angular

I am struggling to create a dynamic object that I need to frame and then pass to the FullCalendar event input. Here is my initial object:

import { EventInput } from '@fullcalendar/core';
...
events: EventInput[];    
this.events = [ { title: '', allDay: false, start: choosenStartDate, end :choosenEndDate, backgroundColor: RateColor.SpecialRate, borderColor: RateColor.SpecialRate },];  

If I have multiple objects, I want to push them into an array, but I'm encountering issues.

let obj1:EventInput = { title: '', allDay: false, start: specialRateStartDate, end :specialRateEndDate, backgroundColor: RateColor.SpecialRate, borderColor: RateColor.SpecialRate };
let obj2 :EventInput= { title: '', allDay: false, start: normalRateFirstStartDate, end :normalRateFirstEndDate, backgroundColor: RateColor.NormalRate, borderColor: RateColor.NormalRate };
let obj3:EventInput = { title: '', allDay: false, start: normalRateSecondStartDate, end :normalRateSecondEndDate, backgroundColor: RateColor.NormalRate, borderColor: RateColor.NormalRate }

When I try this.events.push(obj1);, I get the error

ERROR TypeError: Cannot read property 'push' of undefined
.

One solution that works is setting

this.events=[obj1,obj2,obj3,obj4,obj5...];
, however, I prefer inserting them through a loop.

Answer №1

Make sure to include = []; when declaring an array:

events: EventInput[] = [];    

It's important to initialize the array!

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

Creating dynamic components in Angular 2 and adding them to the view container of the body

I've been grappling with the challenge of dynamically generating a component and then adding it to the document tag. My struggle lies in figuring out the proper method for selecting the body's ViewContainerRef so that I can easily append a new co ...

What significant alterations can be found in the architecture of Angular 2?

Hello, I am currently exploring Angular 2 and Stack Overflow. I am curious about the significant architectural differences between Angular 2 and its predecessor, Angular. In Angular, there were functions like $apply, $digest, $evalAsync, and others. Why we ...

Typescript error TS2717: All following property declarations should share the same data type

During development on my local host, the TypeScript build works perfectly fine. However, when transitioning to Docker with a Node image, I encounter a peculiar error during the build process: src/middlewares/auth.ts(16,13): error TS2717: Subsequent propert ...

What is the best way to implement a <Toast> using blueprintjs?

Struggling without typescript, I find it quite challenging to utilize the Toast feature. This component appears to have a unique appearance compared to the others. Shown below is an example code. How would you convert this to ES6 equivalent? import { But ...

What materials are required in order to receive messages and information through my Contact page?

Currently, I am pondering the optimal method for gathering information from my Contact page. I have already created a form; however, I'm unsure how to send the gathered data to myself since I am relatively new to Web development. Angular is the framew ...

What could be causing ConnectedProps to incorrectly infer the type?

My redux state is rooted and defined as: interface RootState { users: User[] } When working with components, I want to utilize ConnectedProps to generate the props type automatically from my state mapping and dispatch mapping: const mapState = (state: ...

Unable to access the `isDragging` property in TypeScript when using the `useDrag` method from react-d

As a newcomer to utilizing react in combination with typescript, I am currently working on implementing a drag and drop feature using the react-dnd package along with typescript. I came across this helpful blog that has guided me through the process of dra ...

Determine whether there are a minimum of two elements in the array that are larger than zero - JavaScript/Typescript

Looking for an efficient way to determine if there are at least two values greater than 0 in an array and return true? Otherwise, return false. Here's a hypothetical but incorrect attempt using the example: const x = [9, 1, 0]; const y = [0, 0, 0]; c ...

Stay Alert: Angular Observable Continuously Monitored for Promise Updates

I am currently working on an angular application that has a connection with a printer. The printer possesses its own status service that is implemented as a promise, providing the printer's current status as a response. However, I am facing an issue w ...

Running out of memory due to inefficient mark-compacting processes nearing the heap limit in Angular 8 allocation

A significant portion of the modules are built, with only one active in progress. The process is located at ...\src\index.js??extracted!D:\Clients\app\node_modules\sass-loader\lib\loader.js??ref--15-3!D:\src&bso ...

Deleting ion-radio from ion-select component in Ionic v4

Is there a way to remove ion-radio elements generated when calling ion-select with a popover interface? <ion-item> <ion-label>Popover</ion-label> <ion-select interface="popover" placeholder="Select One"> <ion-selec ...

Encountering an issue with managing promises in Observables for Angular HTTP Interceptor

Currently, I am encountering the following situation: I have developed an authentication service using Angular/Fire with Firebase authentication. The authentication service is expected to return the ID token through the idToken observable from Angular/Fir ...

The new mui v5 Dialog is having trouble accepting custom styled widths

I am facing an issue with my MUI v5 dialog where I cannot seem to set its width using the style() component. import { Dialog, DialogContent, DialogTitle, Paper, Typography, } from "@mui/material"; import { Close } from "@mui/icons- ...

Use `$$state: {…}` within the request rather than the data

When attempting to send a request with data, I am only getting "f {$$state: {…}}" in the console. $scope.createTask = function () { var req = $http.post('api/insert', { title: $scope.newTitle, description: ...

Module '../../third_party/github.com/chalk/supports-color' not found in the directory

Within my tutoring-frontend-main project folder There is a file named package.json { "name": "app-frontend", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "n ...

Clicking on the object will bind it to the input field

My input is as follows: <input [(ngModel)]="rowOrder.item" [attr.disabled]="!rowOrder.editRow ? '' : null" > I also have a function that saves the value from this input to the 'editedRowOrder' object when clic ...

Navigating to the main directory in Angular 2

I am currently diving into the world of Angular 2 and attempting to create my very first application. I am following a tutorial from Barbarian Meets Coding to guide me through the process. Following the steps outlined in the tutorial, I have set up my appl ...

Unable to view cross domain cookies within the browser's development tools

I am currently working on a web application that has an Angular front end running on http://localhost:4200 and a NodeJs backend running on http://localhost:3000. When a user successfully logs in, a cookie is set from the backend containing a token. However ...

What are the steps to incorporating the pick function in TypeScript?

The TypeScript documentation mentions a pick function that is declared but not implemented. In an attempt to create a simplified version, I wrote the following: function pick<T, K extends keyof T>(obj: T, key: K): Pick<T, K> { return { [key]: ...

Prevent Chrome Extension Pop-up from Resetting when Closed

I am completely new to the world of programming, with a special focus on web development. My current project is rather simple - it's a Chrome extension designed for note-taking purposes. This extension creates a pop-up window when the user clicks on i ...