Search code examples
angularangular-materialcalendar

How to disable Angular mat-calendar

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

Solution

  • 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));
}