如何在更改突出显示日期的背景后刷新 mat-calendar

Question

我有一个始终打开的垫日历控件。在初始加载时，我突出显示了一组能够执行以下操作的日期：。现在我必须在单击按钮时突出显示今天（或选定日期）。只有当我更改为不同的月份，然后返回到当前月份的视图时，突出显示才有效。有没有办法动态刷新垫日历？请指教

https://am-all-imports-zwnjbd.stackblitz.io

Answer 1

我还没找到本地方法。

这是我的解决方法：

将 mat-calendar 组件放在 div 中，条件是高亮日期数组不是未定义的

<mat-card *ngIf="datesToHighlight">
  <mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>

当你想刷新mat-calendar时，将数组设置为空，然后用更新后的数据填充它

 this.datesToHighlight = null;
 this.datesToHighlight = getMyNewArray();

这样组件将再次加载新数组

Answer 2

您可以简单地使用 MatCalendar.updateTodaysDate() 到 re-render 它。

@ViewChild(MatCalendar) calendar: MatCalendar<Date>;

someEvent(){
    this.calendar.updateTodaysDate();
}

Answer 3

我正在使用 material 7.2 并且为了我移动焦点，它更新了属性 activeDate:

<mat-calendar
    #myCalendar
    [startAt]="startDate"
    [selected]="selectedDate">
</mat-calendar>

<div>
    <button mat-button (click)="addThreeDays()">
        Add 3 days
    </button>
</div>

然后在组件逻辑中

@ViewChild('myCalendar') myCalendar;
startDate = '2019-08-26';
selectedDate = '2019-08-26';

addThreeDays() {
   this.myCalendar.activeDate = '2019-08-29';
}

如何在更改突出显示日期的背景后刷新 mat-calendar

How to refresh mat-calendar after changing the background of highlighted dates

css

angular

angular6

angular-material-7