如何在 mat-calendar 更改当天的样式

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

这在我的代码中运行良好。我希望对你有用。

谢谢阿卜杜拉