Insufficient Initialization of 'Soll' Hours in FullCalendar Project: Issues and Solutions

Question

I received an Angular project from another developer, and they're using the FullCalendar API from https://fullcalendar.io. Below the calendar, there is a table, and I attempted to implement some changes and new functionalities. Depending on the user's events, it displays the days and hours of work completed. Initially, when I load the site, all hours are available except for the 'soll' hours, which are null. Only when I change the user and then revert back to the same user, it shows me the correct 'soll' hours and calculates them together in the small table below.

I've made several attempts in ngOnInit, but without success. It's a large project with many components, and I'm hoping to identify the relevant sections of code. Thanks forward for your help.

here the ngOnInit code of zeiterfassung.ts :

 ngOnInit() {
    
    this.loadData();

    this.dUserSub = this.auth.dbUser.subscribe((user: any) => {
      
        
      this.userInfos.push(user);
      this.getTimeModuleInfos(user);
      this.getUserEvents(user, false);
      this.getSumOfHours();
      this.plannedHours();
    });


    this.auth.getDBUsers();
    this.berechneZeitarten();


    this.currentUser = JSON.parse(
      localStorage.getItem('user')!
    ).multiFactor.user.displayName;
    
  

    this.eventSub = this.events.subscribe(async (event: any) => {
      let startTime;
      let endTime;
      let durationInMs = 0;
      let duration = '';
      let durationEvent = 0;
      for (const [key] of Object.entries(event)) {
        if (this.getType(event[key]) === 'object' && !this.isPause(event[key])) {
          startTime = Date.parse(event[key].start);
          endTime = Date.parse(event[key].end);
          durationInMs = durationInMs + endTime - startTime;
          durationEvent = endTime - startTime;
          duration = this.msToTime(durationInMs);
          event[key].durationEvent = this.msToTime(durationEvent);
        }
      }


      if (event.filter === 'no result') {
        /* this.allEvents = {
          ...this.allEvents,
          [event.name]: [...this.allEvents?.[event.name], {}],
        }; */
        /*       console.log(this.allEvents[event.name]);
        if (this.allEvents[event.name] !== undefined) {
          this.allEvents[event.name] = {};
          console.log('HJDASWd');
        } */
        this.totalDuration = 0;
      } else {
        if (event.filter - 1 === this.userEvents.length || event.filter === 0) {
          // ist die anzahl der tatsächlichen events gleich groß wie die, die aktuell in der liste gesammelt wurden
          // wissen wir dass wir alle events zu einem User gesammelt haben
          this.totalDuration += durationInMs;

          this.userEvents.push({
            ...event,
            day: this.days[new Date(startTime).getDay()],
            duration: duration,
            
          });
          this.allEvents = {
            ...this.allEvents,
            [event.name]: [
              ...this.userEvents,
              { totalDuration: this.msToTime(this.totalDuration) },
            ],
          };

          this.userEvents = [];
          this.totalDuration = 0;
        } else {
          this.totalDuration += durationInMs;

          this.userEvents.push({
            ...event,
            day: this.days[new Date(startTime).getDay()],
            duration: duration,
          });
        }
      }
    });
    this.usersSub = this.auth.users.subscribe((user) => {
      this.users.push(user);
    });
    this.calendarOptions.events = [];
    this.zeitService.fetchCalendarEvents();

    this.auth.getUserRole();
    this.auth.userRole.subscribe((role) => {
      this.role = role;
      if (role === 'admin') {
        this.calendarOptions.editable = true;
      }
    });

    this.zeitSub = this.zeitService.zeiten.subscribe((zeiten: []) => {
      zeiten.map(() => {
        this.calendarOptions.events = zeiten;
      });
    });

    this.refreshUserEvents();
  }




  ngOnDestroy(): void {
    this.zeitService.fetchUnsub();
    this.zeitSub.unsubscribe();
    this.auth.unSubUserAuth();

    if(this.dUserSub){
      this.dUserSub.unsubscribe();
    }
    if (this.userEventsSub) {
      this.userEventsSub.unsubscribe();
    }
    this.usersSub.unsubscribe();
  }
}

and the .html component:

 <ng-container *ngIf="!multiView && allEvents !== undefined">
      <app-edit-event
        (filter)="applyFilter($event)"
        (userChange)="changeUser($event)"
        [role]="role"
        [updateView]="update"
        [calendar]="calendar"
      ></app-edit-event>
    
      <div class="my-custom-calendar-container">
        <full-calendar
        class="my-custom-calendar"
        id="mainCalAdmin"
        [class]="role === 'admin' ? 'mainCalAdmin' : ''"
        [options]="calendarOptions"
        #calendar
        
      ></full-calendar>

      </div>
      
    
      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead class="text-md-center text-black uppercase dark:bg-gray-700 dark:text-gray-400 gray border-2 border-black bg-gray-500">
          <tr>
            <th scope="col" class="px-6 py-3">Datum</th>
            <th scope="col" class="px-6 py-3">Soll</th>
            <th scope="col" class="px-6 py-3">Ist</th>
            <th scope="col" class="px-6 py-3">Start</th>
            <th scope="col" class="px-6 py-3">Ende</th>
            <th scope="col" class="px-6 py-3">Zeit</th>
            <th scope="col" class="px-6 py-3">Zeitart</th>
            <th scope="col" class="px-6 py-3">Projekt/Kunde</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let time of allEvents[currentUser]">
            <ng-container *ngIf="isHeaderRow(time)">
              <tr [ngClass]="{'gray-row': isHeaderRow(time)}">
                <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap border-t-4 border-l border-black ">
                  {{ time.day }}
                  {{ time[Object.keys(time)[0]]?.start | date : "dd.MM.yy" : "locale" }}
                </td>
                <td class="px-6 py-4 border-t-4 border-l border-black">
                  <ng-container *ngIf="time.day && timeModules?.[time.name]?.[time.day] !== null">
                    {{ timeModules?.[time.name]?.[time.day] + " Std"}}
                  </ng-container>
                </td>
                <td class="px-6 py-4 border-l border-t-4  border-black">{{ time?.duration }}</td>
                

             
              </tr>
            </ng-container>
      
            <ng-container *ngFor="let key of Object.keys(time)">
              <ng-container *ngIf="getType(time[key]) === 'object'">
                <!-- Zusätzliche Zellen in einer neuen Zeile -->
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td class="px-6 py-4 gray-row2 border-2 border-b-4 border-black"> {{ time[key]?.start | date : "HH:mm 'Uhr' " : "locale" }}</td>
                  <td class="px-6 py-4 gray-row2 border-2 border-b-4 border-black">{{ time[key]?.end | date : "HH:mm 'Uhr' " : "locale" }}</td>
                  <td class="px-6 py-4 gray-row2 border-2 border-b-4 border-black">{{ time[key]?.durationEvent }}</td>
                  <td class="px-6 py-4 gray-row2 border-2 border-b-4 border-black">{{ time[key]?.title }}</td>
                  <td class="px-6 py-4 gray-row2 border-2 border-b-4 border-black">{{ time[key]?.project }}</td>
                </tr>
              </ng-container>
            </ng-container>
            <!-- Zusätzliche Zellen in einer neuen Zeile -->
          </ng-container>
        </tbody>
      </table>

    </ng-container>

    <br>
    <hr>

    <div class="flex justify-around">

      <div class="w-2/12 m-4 border-4 border-blue-500">
        <table>
          <tr>
            <th colspan="2">Summe Woche:</th>
          </tr>
        
          <tr>
            <td>ist:</td>
            <td>{{ getSumOfHours() }} Std</td>
          </tr>
          <tr>
            <td>soll:</td>
            <td>{{ plannedHours() }} Std</td>
          </tr>
        </table>
      </div>