Calendar not updating angular Ionic

Question

I have implemented a calendar on my ionic Application, but I am still encountering a problem: my calendar never displays the events on the first month. For that I always have to change the month and go back.

I'm still failing to see the line I have to change.

Here is my planning.page.ts page:

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { CalendarComponent } from 'ionic2-calendar';
import { AccessProviders } from '../providers/access-providers';
import { ToastController, AlertController, NavController } from '@ionic/angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-planning',
  templateUrl: './planning.page.html',
  styleUrls: ['./planning.page.scss'],
})
export class PlanningPage implements OnInit {
  currentDate = new Date();
  currentMonth: string;
  @ViewChild(CalendarComponent, {static: false}) myCalendar: CalendarComponent;
  showAddEvent: boolean;
  newEvent = {
    title: '',
    description: '',
    imageURL: '',
    startTime: '',
    endTime: ''
  };
  allEvents = [];
  minDate = new Date().toISOString();
  public events:any;
  datastorage: any;
  id: Number;
  token = null;
  constructor(
    public http: HttpClient,
    private alertCtrl: AlertController,
    private accsPrvds: AccessProviders,
    private toastCtrl: ToastController,
    private storage: Storage,
    public navCtrl: NavController,
  ){
    this.getStorageData();
  }
   

  getEvents(){
    let body = { 
      id: "",
      token: "",
      proces: "get-event"
    }
    this.accsPrvds.post(body, 'events.php').subscribe((res: any) => {
      this.events = res.data;
      this.addEvent();
    });
  }


  onViewTitleChanged(title: string) {
    this.currentMonth = title;
  }


  ngOnInit() {
  }


  addEvent() {

    this.events.forEach(event => {
      console.log(event);
      console.log(event.date_start);
      this.allEvents.push({
        title: event.nom,
        startTime:  new Date(event.date_start),
        endTime: new Date(event.date_end),        
        });
    })
    
  }
  
  async onEventSelected(event) {
    // Use Angular date pipe for conversion
    const alert = await this.alertCtrl.create({
      header: event.title,
      message: 'Du: ' + event.startTime + '<br><br>Au: ' + event.endTime,
      buttons: ['OK'],
    });
    alert.present();
  }

  async getStorageData() {
    this.storage.get('storage_xxx').then(async (res) => {
      if (res == null){
        this.navCtrl.navigateRoot('/login');
        const toast = await this.toastCtrl.create({
          message: 'Veuillez vous connecter pour accéder à cette page.',
          duration: 2000,
          position: 'top'
        });
        toast.present();
      } else {
        this.datastorage = res;
        this.id = this.datastorage.id;
        this.token = this.datastorage.token;
        let body = {
          id: this.id,
          token: this.token,
        }
        this.accsPrvds.post(body, 'pageAutorisation.php').subscribe(async(res: any) => {
          if(res.message){
            this.getEvents();
          } else {
            this.navCtrl.navigateRoot('/login');
            const toast = await this.toastCtrl.create({
              message: 'Veuillez vous connecter pour accéder à cette page.',
              duration: 2000,
              position: 'top'
            });
            toast.present();
          }
        });
      }
    });
  }

}

And here is the html one:

<ion-header>
  <ion-toolbar>
   <ion-row class="ion-img-center">
        <img  src="https://www.random.fr/ninja/img/logo.png" style="width:30px;height:30px;">
        <ion-title >PLANNING {{ currentMonth }}</ion-title>
    </ion-row>
  <ion-buttons  slot="start">
    <ion-menu-button menu="main-menu"></ion-menu-button>
  </ion-buttons>

  </ion-toolbar>
</ion-header>


<ion-content>

    <calendar 
            [eventSource]="allEvents"
            [currentDate]="currentDate"
            (onTitleChanged)="onViewTitleChanged($event)"
            (onEventSelected)="onEventSelected($event)"
            id="myCalendar"
            locale="fr-FR"
            calendarMode="month" 
            startHour="6"
            endHour="20"
            step="30"
            startingDayWeek="1"
            format="YYYY-MM-DD">
    </calendar>

</ion-content>

Answer 1

Sorry that constructor advice applies to Node but is not valid for angular apparently.

1. call to storage is async. So when you call it the first time, you page renders before there is data. That's why events are empty the first time. By the time you go forward and back, the data is available

2. So what you want to do is RETURN the promise (note the return added to getStorageData)

3. Move the call to viewWillEnter. Here it is allowed to do async in Angular.

4. Add async tag to viewWillEnter function and await the call.

This will force lifecycle to wait for data before painting page the first time.

import { CalendarComponent } from 'ionic2-calendar';
import { AccessProviders } from '../providers/access-providers';
import { ToastController, AlertController, NavController, ViewWillEnter } from '@ionic/angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-planning',
  templateUrl: './planning.page.html',
  styleUrls: ['./planning.page.scss'],
})
export class PlanningPage implements ViewWillEnter {
  currentDate = new Date();
  currentMonth: string;
  @ViewChild(CalendarComponent, {static: false}) myCalendar: CalendarComponent;
  showAddEvent: boolean;
  newEvent = {
    title: '',
    description: '',
    imageURL: '',
    startTime: '',
    endTime: ''
  };
  allEvents = [];
  minDate = new Date().toISOString();
  public events:any;
  datastorage: any;
  id: Number;
  token = null;
  constructor(
    public http: HttpClient,
    private alertCtrl: AlertController,
    private accsPrvds: AccessProviders,
    private toastCtrl: ToastController,
    private storage: Storage,
    public navCtrl: NavController,
  ){
  }
   

  async ionViewWillEnter(): void {
    await this.getStorageData();
  }

  getEvents(){
    let body = { 
      id: "",
      token: "",
      proces: "get-event"
    }
    this.accsPrvds.post(body, 'events.php').subscribe((res: any) => {
      this.events = res.data;
      this.addEvent();
    });
  }


  onViewTitleChanged(title: string) {
    this.currentMonth = title;
  }

  addEvent() {

    this.events.forEach(event => {
      console.log(event);
      console.log(event.date_start);
      this.allEvents.push({
        title: event.nom,
        startTime:  new Date(event.date_start),
        endTime: new Date(event.date_end),        
        });
    })
    
  }
  
  async onEventSelected(event) {
    // Use Angular date pipe for conversion
    const alert = await this.alertCtrl.create({
      header: event.title,
      message: 'Du: ' + event.startTime + '<br><br>Au: ' + event.endTime,
      buttons: ['OK'],
    });
    alert.present();
  }

  async getStorageData(): Promise<any> {
    return this.storage.get('storage_xxx').then(async (res) => {
      if (res == null){
        this.navCtrl.navigateRoot('/login');
        const toast = await this.toastCtrl.create({
          message: 'Veuillez vous connecter pour accéder à cette page.',
          duration: 2000,
          position: 'top'
        });
        toast.present();
      } else {
        this.datastorage = res;
        this.id = this.datastorage.id;
        this.token = this.datastorage.token;
        let body = {
          id: this.id,
          token: this.token,
        }
        this.accsPrvds.post(body, 'pageAutorisation.php').subscribe(async(res: any) => {
          if(res.message){
            this.getEvents();
          } else {
            this.navCtrl.navigateRoot('/login');
            const toast = await this.toastCtrl.create({
              message: 'Veuillez vous connecter pour accéder à cette page.',
              duration: 2000,
              position: 'top'
            });
            toast.present();
          }
        });
      }
    });
  }

}