Cannot read property '__k' of null - FullCalendar + Angular 11

user_15933656 0
Viewed 2272

I am using Full Calendar plugin for Angular 11. I keep getting the error "Cannot read property '__k' of null". Seems it is happening when calendar.render() is called. But can't get to the bottom of it. Any help is much appreciated.

This is my ts 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 my html file

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

Here is a screenshot of the error:

angular typescript fullcalendar
2 Answers

The error is there because calendarEl is null. Declare calendar somewhere before that function if you need to access it globally. After the line where you define calendarEl, wrap everything in the conditional check

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

I have tried this on my local box. The only thing is I did not invoke the .render() within the OnInit(). Because we are specifying the Calendar control with the HTML markup. I have checked the code into my GitHub repository and given the link below. Please let me know if you need any assitance.

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

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

enter image description here

user_36561140
Related