Question

我正在尝试从角形材料垫日历中除去月份标签。这是stackblitz链接

https://stackblitz.com/edit/am-all-imports-mviy6e?file=styles.scss

  <mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>


onSelect(event){
    console.log(event);
    this.selectedDate = event;
  }

  dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
      const highlightDate = this.datesToHighlight
        .map(strDate => new Date(strDate))
        .some(d => d.getDate() === date.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() === date.getFullYear());

      return highlightDate ? 'special-date' : '';
    };

}

对于CSS：-

.mat-calendar-body-label{
   display: none;
  }

如果我使用上述CSS代码，它将日历日期从左向右移动并使日历失真。

如果我使用这个：-

.mat-calendar-body-label{
  opacity: 0;
  }

然后，如果没有日期，它将留空行

Answer 1

除了：

.mat-calendar-body-label{
     opacity: 0;
}

添加以下内容以消除当月的第一天从第一列开始时的多余空间：

.mat-calendar-body-label[colspan="7"] {
    display: none;
}

Answer 2

由于封装，您需要使用阴影穿孔来获得日历的样式，因此请使用ng-deep选择器。

::ng-deep .mat-calendar-body-label{
   display: none;
  }

自定义垫日历，删除月份标签

2 个答案: