Fullcalendar and Angular 14 - accessing component functions

Question

This is probably something simple, anyway for some reason I cannot access my component functions from fullcalendar configuration object.

I followed the official doc on how to setup fullcalendar in Angular 14 : https://fullcalendar.io/docs/v6/angular

import { Component, OnInit } from '@angular/core';
import { CalendarOptions, defineFullCalendarElement } from '@fullcalendar/web-component';
import dayGridPlugin from '@fullcalendar/daygrid';
import { MyHttpService } from '...';

defineFullCalendarElement();

@Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {

test:number = 1;
calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
    },
    events: function (info, successCallback, failureCallback) {
            console.log(this.test) //Cannot read properties of null (reading 'test')
            this.myHttpService.getEvents() //Cannot read properties of null (reading 'myHttpService')
                .subscribe((events) => {
                    successCallback(this.makeEvents(events));
                });
            },

    };

/**/
constructor(protected myHttpService : MyHttpService) { }

Basically I cannot access "this." inside the events function. Is this normal ?

Answer 1

currently this is referring to the calendarOptions, instead of creating a events function using function keyword, create it using arrow function.

example:

events: (info, successCallback, failureCallback)=>{}

you should be able to access this.test