Integrating fullcalendar in angular project-CodePudding

I am using fullcalendar (free version (6)) in my angular (15) project. Once a user clicks on a date in the calendar, I need to to show some information about this day. Thus, I call a function which retrieves this info from the database, and shows it in a modal to the user (for now I just alert it).

But calling my function I get the error:

Property 'retrieveDataBase' does not exist on type 'CalendarOptions'

So I want to know if there is any way to integrate my function into fullcalendar?

P.S. my data is huge and I can't show it as an event in different days!

Here is my code.

export class someComponent {

  calendarOptions: CalendarOptions = {
    plugins: [interactionPlugin],          
    dateClick: function(info) {                    
      this.retrieveDataBase(info.dateStr);  // Gives error!                    
    },
  }
        
  retrieveDataBase(date: string):void{  
    this.dummyService.getdb(date).subscribe(
      (response: any) => {
        const { results } = response;
        alert(results);
        console.log(response);
      },
      (error: any) => {
        console.log(error);
      }
    );
  }
}

CodePudding user response：

Try replacing that callback with an arrow function (this could cause it to resolve this based on lexical scoping, which would then refer to the class):

export class someComponent {

  calendarOptions: CalendarOptions = {
    plugins: [interactionPlugin],          
    dateClick: (info) => {                    
      this.retrieveDataBase(info.dateStr);   
    },
  }
        
  retrieveDataBase(date: string):void{  
    this.dummyService.getdb(date).subscribe(
      (response: any) => {
        const { results } = response;
        alert(results);
        console.log(response);
      },
      (error: any) => {
        console.log(error);
      }
    );
  }
}