Календарь с отфильтрованными данными в Angular

Question

Мне нужен календарь, в котором я могу фильтровать дату, чтобы пользователь мог выбирать данные только в эти даты. Фильтрация даты осуществляется с помощью углового выбора даты, но проблема в том, что его нельзя открывать постоянно. Это означает, что если я нажму за пределами выбора даты, он закроется. Я не хочу этогоЯ хочу открыть его все время, поэтому мне нужен календарь

Поэтому я хочу календарь, в котором даты всегда отображаются и фильтруются по датам. если это возможно, я хочу именно изображение, показанное ниже. Любая помощь будет принята с благодарностью. Заранее спасибо.

Answer 1

Вы можете просто использовать mat-calendar с директивой dateFilter. https://github.com/angular/components/blob/master/src/material/datepicker/calendar.ts#L233

<mat-calendar [dateFilter]="myFilter"></mat-calendar>

где myFilter:

myFilter = (d: Date): boolean => {
  const day = d.getDay();
  // Prevent Saturday and Sunday from being selected.
  return day !== 0 && day !== 6;
}

Пример Stackblitz: https://stackblitz.com/edit/angular-xvvc8y?file=app/datepicker-overview-example.html