如何在垫日历上更改当前日期的样式

Question

我正在尝试将自定义类添加到某些日期(日期数组(有什么建议吗？(突出显示一些日期 - 事件(

.html：

<mat-card-content>
<div class="date-picker">
<mat-calendar [selected]="selectedDates" (selectedChange)="selectedDates = $event" #calendar>
</mat-calendar>
</div>

TS：

this.selectedDates = [new Date('2014-08-28T11:13:59'), new Date('2014-07-27T11:13:59')];

有什么想法吗？

Answer 1

html：

<mat-calendar [minDate]="minDate" [maxDate]="maxDate" [selected]="selectedDates" (selectedChange)="selectedChange($event)" [headerComponent]="displayMonth()" [startAt]="startDate"></mat-calendar>

.ts：

import { Component, OnInit, Input, OnChanges, ViewEncapsulation, ElementRef, Renderer2 } from '@angular/core';
constructor(
private elRef: ElementRef,
private renderer: Renderer2
) {}
displayMonth() {
let HeaderElsClass = this.elRef.nativeElement.getElementsByClassName('mat-calendar-body-cell');
let orderDate = this.convertDate.dateFormat(this.tempOrdersDate, 'MMMM D, YYYY'); 
// tempOrderDate is epoch array, i convert from epoch to date
for(let index in HeaderElsClass) {
if(typeof HeaderElsClass[index] === 'object') {
let headerClass = HeaderElsClass[index].getAttribute('aria-label');
orderDate.find(each => {
if(each === headerClass) {
this.renderer.addClass(HeaderElsClass[index], 'mat-calendar-body-active');
this.renderer.setStyle(HeaderElsClass[index], 'font-weight', '900');
}
return false;
})
}
}
}