Retrieve FullCalendar events from database using events as a function in angular

Question

I am trying to load my fullcalendar events from my database using the events field from CalendarOptions as shown below.

  calendarOptions: CalendarOptions = {
    plugins: [timeGridPlugin, interactionPlugin],
    initialView: 'timeGridDay',
    editable: true,
    selectable: true,
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.handleEvents.bind(this),

    events: function(fetchInfo,successCallback){
      LoadEvents(fetchInfo.startStr)
        .then((returnEvents) => {
          console.log(returnEvents);
          successCallback(returnEvents);
        })
        .catch((error) => {
          console.log(error);
        })
    }
  };

My LoadEvents function is able to successfully log the results but I cannot just return the array as the http.get is async and the array was getting returned empty.

async LoadEvents(date : string) {

  const events : EventInput[] = [];
  
  http.get<CalendarEvent[]>(getBaseUrl() + 'calendarevent').subscribe(result => {
    result.forEach(function (val) {
      console.log(result.length)
      events.push({
        id: val.id,
        title: val.title,
        start: val.date
      })
    })
  }, error => console.error(error));

  return events;
}

I have tried to await the http.get in multiple different ways before returning the array so I could just use full calendar Initial events, but I was unable to get that to work.

Thank you for the help.

Answer 1

You can change your code like this-

calendarOptions: CalendarOptions = {
    plugins: [timeGridPlugin, interactionPlugin],
    initialView: 'timeGridDay',
    editable: true,
    selectable: true,
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventsSet: this.handleEvents.bind(this),

    events: this.LoadEvents.bind(this)
  };

and the fetchEventsFromAPI method should be like this-

async LoadEvents(args: EventSourceFuncArg): Promise<EventInput[]> {
        return new Promise<EventInput[]>((resolve) => {
          console.log(args.startStr);
          http.get<CalendarEvent[]>(getBaseUrl() + 'calendarevent').subscribe(result => {
            result.forEach(function (val) {
              console.log(result.length);
              const events: EventInput[] = [];
              events.push({
                id: val.id,
                title: val.title,
                start: val.date
              });
              resolve(events);
            });
          }, error => console.error(error));
        });
      }

I hope this will help you, let me know if you face any issue.