Angular Setting an Array[] before the view renders

Currently i'm trying to figure out a way to fill this array events: CalendarEvent[] = []; Before the view renders. As i'm trying to fill a calendar from some database entries I have, But I already have the data pulled In one function then I assign in another. The issue being that I cant seem to get the array to update before the render but can easily update it with a button click event afterwords.

So im diving into the different ways to approach this, Ive tried things like setting a loader and not rendering with a ngIf until the function is done, But when it comes to angular alot of this is still a miss for me, So im unsure what possible approaches there are in regards to this.

As I understand it currently the way my service returns the entries it just returns a promise and not the values so the view doesn't have the data, So I understand there are ways for me to manipulate the component state, But are there ways to achieve this without having to refresh the component after the render

I thought something like this would work but as I understand Async in Angular is different from that in c#/Xamarin ect

async ngOnInit(){
    await this.getEntries();
    await this.setCalendar();
  }

I fetch the entries:

  getEntries(){
    this.entryservice.getAventry().subscribe(data => {
      this.entries = data.map(e => {
        return {
          id: e.payload.doc.id,
          ...e.payload.doc.data() as {}
        } as Entrymodel;
      })
    });
    console.log("Get Done");
  }

I then push them to the calendar array:

 setCalendar(){
     this.entries.forEach(element => {
       
      let start = element.startDate.year + "-" + element.startDate.month + "-" + element.startDate.day;
      let end = element.endDate.year + "-" + element.endDate.month + "-" + element.endDate.day;

      var startDate = new Date(start); 
      var endDate = new Date(end); 
   
      var title = element.info + " " + element.surname;
       this.events = [
        ...this.events,
        {
          title: title ,
                                                                                                                                                       
          start: startOfDay(startDate),
          end: endOfDay( endDate),
          color: {
            primary: element.color,
           secondary: element.color
          },
          draggable: false,
          resizable: {
            beforeStart: false,
            afterEnd: false,
          },
          cssClass: element.surname,
        },
      ];
    
    });

The Calendar Library StackBlitz More or less same thing StackBlitz

Please note: The Entires Array is Where I get the data from the database, The issue is the events: CalenderEvent[] = []; Is not getting filled before the view render So the calendar is empty And the only way to currently fill it is with a click event or something of the sorts after the initial render, I have tried the below answers they dont work for me

A small note I seem to have forgotten to add:

The Variables im using:

  entries: Entrymodel[] = [];
 events: CalendarEvent[] = [];

The Entry Model:

export class Entrymodel {
    id: string;
    surname: string;
    color: string;
    startDate: Startdate;
    endDate: Enddate;
    info: string;
    status?: string;
    inbet?: Inbetween[];
    editing?: boolean;
}

export class Startdate{
    day: string;
    month: string;
    year: string;
}

export class Enddate{
    day: string;
    month: string;
    year: string;
}

export class Inbetween{
    day: string;
    month: string;
    year: string;
}

I am trying to get the Entries, As they contain dates that Need to be pushed into the events Array to display on the calendar