时间戳

首页 > 解决方案 > 为特定日期添加背景颜色

angular - 为特定日期添加背景颜色

问题描述

我有一个日历并使用 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>

不幸的是，这不起作用

我的代码有什么问题？

标签： angularhtmlbootstrap-4angular-material

解决方案

就像评论中说的那样，您可以使用 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;
}

推荐阅读