Question

我有一个日历，并使用material-calendar，我只想突出显示一个特定的日期，例如19-7-2018，这意味着它应该具有背景色，例如红色

这是我到目前为止所做的

<div class="form-group form-element_date">
          <mat-calendar  [minDate]="minimumDate" [maxDate]="restrictedBookingDates" mat-date-filter="restrictedBookingDates"  [selected]="selectedDate" (selectedChange)="selectedDate = $event">
            <ng-template pTemplate="date" let-date>
              <span  class="dot" [ngStyle]="{backgroundColor: (date.day ==19) ? '#348db2' : 'inherit'}"   
              >{{date.day}}</span>
          </ng-template>
          </mat-calendar>
        </div>

不幸的是，这不起作用

我的代码有什么问题？

Answer 1

就像在评论中说的那样，您可以使用ngClass。在HTML中：

<div class="form-group form-element_date">
          <mat-calendar  [minDate]="minimumDate" [maxDate]="restrictedBookingDates" mat-date-filter="restrictedBookingDates"  [selected]="selectedDate" (selectedChange)="selectedDate = $event">
            <ng-template pTemplate="date" let-date>
              <span  class="dot" [ngClass]="{'your-class': date.day === 19}"   
              >{{date.day}}</span>
          </ng-template>
          </mat-calendar>
        </div>

在CSS中：

.your-class {
  background-color: #348db2;
}

Answer 2

尝试此操作，使用 background-color （而不是 backgroundColor

）

<span  class="dot" [ngStyle]="{'background-color': (date.day ==19) ? '#348db2' : 'inherit'}">{{date.day}}</span>

将背景色添加到特定日期

2 个答案: