在特定日期显示标签的角度材料日历答案

【问题标题】：Angular material calendar to display labels on specific dates在特定日期显示标签的角度材料日历
【发布时间】：2020-09-09 15:17:21
【问题描述】：

我正在使用角度材料日历，我想在 mat-calendar 中为特定日期添加标签，它工作得很好，但我想在特定日期显示一些标签。要了解视图，请参见下图。

我已经尝试实现类似用背景颜色突出显示某些日期的功能，不幸的是，它不需要查看它，请通过下面的图片。

有没有办法做到这一点？如果它请帮助我，我们将不胜感激，请通过以下代码。

ex.html:->

  <mat-calendar opened [selected]="date" [dateClass]="dateClass()">
  </mat-calendar>
</mat-card>

ex.ts:->

dateClass() {
  return (date: Date): MatCalendarCellCssClasses => {
    if (date.getDate() === 21 || date.getDate() === 23) {
      return 'special-date';
    } 
    else{
      return ;
    }
  };
}

提前感谢您的帮助。

【问题讨论】：

很难管理 mat-calendar：mat-calendar 只允许在“days”中添加 css。确实可以使用伪元素:after 来获取它。我花了一些时间制作一个堆栈闪电战：stackblitz.com/edit/…，但我投降了。我认为您最好的选择是使用 ng-bootstrap 日期选择器：ng-bootstrap.github.io/#/components/datepicker/overview 或创建自己的日历：stackoverflow.com/questions/59943990/…
@Eliseo 你是对的，但是根据客户的要求，我应该在这里只使用材料元素，他们希望在角度材料（UI）和角度（用于功能）中完全应用，并且根据你的建议如果我使用 ng-bootstrap 的外观和感觉会改变，因为我们在整个应用程序中使用 mat-calendar，所以我不想使用 ng-bootstrap。我很感激这对我的问题来说非常好，如果你花更多时间在上面，我想你会成功完成它。你快到了，谢谢你的帮助。

标签： javascript html css angular angular-material

【解决方案1】：

感谢@Eliseo 的帮助。我在这里做了一些小修改以达到要求并通过以下输出解决，如下所示。

这里我删除了日历在日期上的悬停效果，以便更好看，我希望它能给。

这里是工作示例Modified Calendar

再次感谢您的帮助。

【讨论】：