Encountering issue with FullCalendar and Angular 11: Error reading property '__k' of null

I am currently utilizing the Full Calendar plugin with Angular 11 but have encountered an error message stating "Cannot read property '__k' of null". It appears to be occurring when the calendar.render() function is called, and I'm struggling to pinpoint the exact cause. Any assistance on this matter would be greatly appreciated.

Here's a snippet from my TypeScript file:

export class FullCalendarComponent {
    public calendar: Calendar | undefined;
    calendarEl: any;

    calendarOptions: CalendarOptions = {

        slotMinTime: '07:00:00',
        slotMaxTime: '19:00:00', 
        slotDuration: '00:15:00',
        height: 680,
        events: [
            this.currentEvents,
        ],

        headerToolbar: {
            start: 'today prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        firstDay: 1,
        initialView: 'timeGridWeek',
        weekends: true,
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        select: this.handleDateSelect.bind(this),
        eventClick: this.handleEventClick.bind(this),
        allDaySlot: false,

       }
    ngOnInit(): void {

        let calendarEl = document.getElementById('calendar');
        let calendar = new Calendar(calendarEl!, this.calendarOptions);
        calendar!.render();

    }

And here is part of my HTML file:

  <div class="calendar">
        <full-calendar #calendar [options]="calendarOptions"></full-calendar>
    </div>

I've included a screenshot of the error for reference.

Answer №1

The problem arises due to the fact that calendarEl is null. To resolve this issue, make sure to declare calendar in a global scope before the function where it is being accessed. You should also encapsulate all the code after defining calendarEl within a conditional check.

  var calendar;
   let calendarEl = document.getElementById('calendar');
   if (calendarEl != null) {
        let calendar = new Calendar(calendarEl!, this.calendarOptions);
        calendar!.render();
   }
});

Answer №2

I recently tested this code on my local machine and noticed that I forgot to call the .render() method within the OnInit(). This is because we are defining the Calendar control in the HTML markup itself. I have uploaded the code to my GitHub repository, and you can find the link below. Feel free to reach out if you need any help.

<div class="calendar">
        <full-calendar #calendar [options]="calendarOptions"></full-calendar>
    </div>

URL: https://github.com/vishipayyallore/mini-projects-2021/tree/master/Projects/5_GettingStartedWithRouting

https://i.sstatic.net/HJ8Cv.png

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 internal mechanism used by Angular for routing implementation?

My traditional belief about web browsers has been challenged by the behavior of Angular. I used to think that when a user enters a new URL, the browser would fetch a whole new page from the network and display it, replacing the old one. But with Angular, ...

How can we enforce that only a certain type of ReactElement is allowed to be passed as props to a Component in TypeScript?

eslint and vscode seem to have trouble detecting validation errors when passing incompatible ReactElement types. Despite searching through documentation and examples, I haven't been able to find a solution that works. // Footer.tsx export interface ...

Tips for bundling and inlining .json files within an Angular npm package

I am currently in the process of developing an NPM Package for an Angular module that I intend to utilize across several Angular applications. The Angular module I have developed relies on ng2-translate to access localization strings stored in .json file ...

The value returned by elementRef.current?.clientHeight is not the correct height of the element

I've encountered a peculiar issue with my code where the reported height of an element does not match its actual size. The element is supposed to be 1465px tall, but it's showing up as 870px. I suspect that this discrepancy might be due to paddin ...

Angular 2 Issue: Unable to connect to 'routerlink' because it is not recognized as a valid property of 'a' tag

As a newcomer to Angular 2, I am attempting to create a sample application based on a Pluralsight tutorial. However, I encountered the mentioned error when trying to set up Routes. I am struggling to identify the cause of this error. Any assistance would ...

What is the best way to stay on track with internal anchor links when navigating with Aurelia?

I'm currently working on developing a style guide for a project and one of the features I would like to implement is a basic click behavior on anchor links, allowing them to smoothly scroll to the corresponding section on the page. For instance: < ...

Using React Query's useMutation hook may result in an error message of "No overload matches this call"

When incorporating react-query into my typescript project, I encountered a perplexing type error while attempting to utilize the useMutation() hook with a graphql query. Here is an example of the code: useMutation( async ( parameter1: string, ...

What is the best approach to testing the React Hook "useEffect" that is used to make an API call with Typescript?

Currently, I am working on writing Jest-enzyme tests for a basic React application using Typescript along with the new React hooks. The main issue I am facing is with properly simulating the api call made within the useEffect hook. Within the useEffect, ...

The Vue route parameters are not recognized within the function type

Seeking assistance on extracting parameters from my route in a vue page, I have the following implementation: <script lang="ts"> import { defineComponent } from 'vue'; import { useRoute } from 'vue-router'; export ...

I am encountering unexpected behavior with NextJS's getInitialProps function, as it is giving me a compiler error stating "varName not found on type {}"

I seem to be stuck on a simple syntax issue while working with NextJs. I am attempting to perform dynamic server-side fetches using the getInitialProps pattern. However, the compiler is unable to recognize the return of getInitialProps in the regular func ...

The current state of this scenario is not clearly defined within the parent class

Here is the scenario that caught my attention: abstract class Base { public _obj = { name: 'Test' } print1() { console.log(this._obj) } print2() { console.log(this) } } class Child extends Base { print2( ...

Material Modules are causing issues with AOT compilation

I'm encountering multiple errors that all share a similar pattern: ERROR in ./node_modules/@angular/material/button/typings/index.ngfactory.js Module build failed: Error: Invalid name: "@angular/material/button" at ensureValidName (C:\path&b ...

Navigating with Gatsby Link and leveraging TypeScript

I am currently utilizing Gatsby Link with TypeScript and I am looking to pass parameters to a linked component from the source component. The documentation provided by Gatsby states the following: Sometimes you’ll want to pass data from the source pag ...

Assign a predetermined value to a dropdown list within a FormGroup

I have received 2 sets of data from my API: { "content": [{ "id": 1, "roleName": "admin", }, { "id": 2, "roleName": "user", }, { "id": 3, "roleName": "other", } ], "last": true, "totalEleme ...

Is it possible to utilize a JSON file to input events into FullCalendar that can accommodate multiple users?

Here's how I'm integrating event information from my database with FullCalendar using PHP: Retrieve event information from the database. Organize the data into an array and customize formatting, colors, etc. Convert the array to JSON format usi ...

Implementing a global provider in Ionic 3

I have integrated a provider in my app that needs to stay active at all times while the application is running to monitor the network connection status. Following this guide, I included the class in my app.module.ts file to ensure it functions as a global ...

Bring in a template in TypeScript with no need for require statement

Currently, I'm utilizing TypeScript along with Angular 1.5 component. In my scenario, I have a custom decorator in place through which I send templates via require function. The setup is functional; however, I am consistently receiving a tslint warnin ...

What is the process of integrating an MVC View into the template URI of a typescript component?

I am currently working on a project using MVC core and AngularJS2 with TypeScript. I recently added a new component (View located in Views\Home\Default.cshml) but I am encountering some issues. Below is the code I have tried: import { Componen ...

Can you please verify the most recent updates for Bootstrap and Syncfusion in my Angular project?

Could someone help me figure out when the bootstrap and syncfusion libraries were last updated in my Angular project? I'm having difficulty finding this information. ...

The variable X has been defined, but it's never actually utilized. Despite declaring it, I have not accessed its

I have encountered warnings in VSCode while using certain properties in my Angular component. The warnings state: '_id' is declared but its value is never read.ts(6133) (property) ItemEditComponent._id: number | undefined '_isModeEdit' ...