I was looking for a way to disable mac-calendar component (not datepicker) in a easy way while I was calling API for data of the selected day.

Found no solution after a lot of search, because there not exists a "disable" property, and the "dateFilter" solution was not good, due to I have also another date filters, what complicates management.

So I ended with this CSS solution

I was looking for a way to disable mac-calendar component (not datepicker) in a easy way while I was calling API for data of the selected day.

Found no solution after a lot of search, because there not exists a "disable" property, and the "dateFilter" solution was not good, due to I have also another date filters, what complicates management.

So I ended with this CSS solution

• angular
• angular-material
• calendar

1 Answer 1

Create a CSS style to emulate disable:

.disabled-calendar {
  pointer-events: none;
  opacity: 0.5;
}

And add the style when waiting for API call:

<mat-calendar
  class="calendar"
  [ngClass]="{ 'disabled-calendar': callingAPI }"
  [maxDate]="maxDate"
  (selectedChange)="dayChange($event)"
  [(selected)]="selectedDate"
></mat-calendar>

Now the calendar is not clicable when I call the API.

dayChange() {
  this.callingAPI = true;
  this.myService.getData().pipe(finalize(() => this.callingAPI = false));
}