I am using mat-calendar
. I am trying to highlight certain dates but I couldn\'t do it. There is no proper documentation for this.
HTML
if datas are loaded through service then you have to use *ngIf="datas"
on the mat-calendar
, so that dateClass
will called after the data comes in. ie:
html:
ts:
dateClass() {
return (date: Date): MatCalendarCellCssClasses => {
const highlightDate = this.datas.map(strDate => new Date(strDate))
.some(d => d.getDate() === date.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() === date.getFullYear());
return highlightDate ? 'special-date' : '';
};
}
ngOnInit() {
this.studentreportsService.getHeatMap(this.studentid)
.subscribe(data => {
this.datas = data; // ["2019-01-22", "2019-01-24"]
});
}