CODEWITHSUNDEEP
angulartypescriptfullcalendar
ivkovic.boris
ivkovic.boris

Reputation: 51

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

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:

Upvotes: 4

Views: 4572

Answers (2)

Marta P
Marta P

Reputation: 33

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();
   }
});

Upvotes: 2

Viswanatha Swamy
Viswanatha Swamy

Reputation: 817

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

Upvotes: 0

Related Questions