Having trouble using click events with ionic-calendar 2

Question

I am trying to use a (click) event for ionic-calendar 2 where it disables a button if the user clicks on a date that has already passed, my problem is that when I first click on a passed date the button is not disabled, but the second time I press it it disables the button, it seems as if the calendar itself is not recognizing that someone clicked on a different date at the time of the first click.

HTML

 <calendar (click)='passedDate()' [eventSource]='eventSource'
   [calendarMode]='calendar.mode'
   [currentDate]='calendar.currentDate'
   (onEventSelected)='onEventSelected($event)'
   (onTitleChanged)='onViewTitleChanged($event)'
   (onTimeSelected)='onTimeSelected($event)'
   step='30'
   class='calendar'>
  </calendar>

  <button ion-button (click)='appointments()' id="date" block [disabled]="block"> 
    Next
   </button>

Typescript

  eventSource =[];
  viewTitle: string;
  selectedDay =  new Date();
  block = false; //If user clicks on a date that has already passed this value turns true
  calendar = {
    mode: 'month',
    currentDate: ''


  }

  onViewTitleChanged(title){
    this.viewTitle = title;
  }

  onTimeSelected(ev){
   this.selectedDay = ev.selectedTime;
  }

  passedDate(){
    const date = new Date();

    if(this.selectedDay < date){
      this.block = true;
    }
    else { this.block = false;} 
  }

This is my first time using ion-calendar 2 so I am not sure how click events are supposed to work on it, but I am expecting that if a user clicks on a date that has already passed it instantly disables the button.

Answer 1

Instead of (click)=“passedDate()” you could try (onCurrentDateChanged)="passedDate($event)" .

Like this:

 <calendar [eventSource]="eventSource"
        [calendarMode]="calendar.mode"
        [currentDate]="calendar.currentDate"
        (onCurrentDateChanged)="passedDate($event)"
        (onRangeChanged)="reloadSource(startTime, endTime)"
        (onEventSelected)="onEventSelected($event)"
        (onTitleChanged)="onViewTitleChanged($event)"
        step="30">
</calendar>

And in typescript like this:

passedDate(selectedDate){
    const date = new Date();

    console.log(selectedDate);

    if(selectedDate < date){
      this.block = true;
    }
    else { this.block = false;} 
}

Stackblitz with working example: https://stackblitz.com/edit/ionic-web9ga