Highlighting certain dates in mat-calendar

前端 未结 3 1647
眼角桃花
眼角桃花 2021-02-05 21:33

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

3条回答
  •  悲哀的现实
    2021-02-05 22:05

    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"]
      });
    }
    

提交回复
热议问题