我正在使用 Angular Material 日历(即)mat-calendar。我试图突出显示日历中的一些日期。但我看不到任何相关文件。谁能帮我解决这个问题。
HTML
<mat-card>
<mat-calendar name="appoinment_date" [selected]="selectedDate (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>
TS
onSelect(event){
this.selectedDate= event;
}
我想要的是//应该能够高亮日期
最佳答案
2019 年了。对于仍在寻找答案的任何人
<mat-calendar [dateClass]="dateClass()"
(selectedChange)="getDayRequestsList($event)"> </mat-calendar>
dateClass() {
return (date: Date): MatCalendarCellCssClasses => {
const highlightDate = this.datesToMark // array of dates
.map(strDate => new Date(strDate)) // wrap with new Date if not in
date object
.some(d => d.getDate() === date.getDate() && d.getMonth() ===
date.getMonth() && d.getFullYear() === date.getFullYear());
console.log(highlightDate);
const highlightCurrentDate = this.upcomingCalendarEvents
.map(strDate => new Date(+strDate.date))
.some(d => d.getDate() === date.getDate() && currentDate.getDate() ===
d.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() ===
date.getFullYear());
console.log(highlightDate);
if(highlightCurrentDate) {
return 'highlight-current-date-class'
} else if(highlightDate) {
return 'highlight-date-class'
} else {
return ''
}
};
}
关于angular - 在垫日历中突出显示日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52510875/