Angular Material datepicker 在日单元格中带有自定义文本答案

【问题标题】：Angular Material datepicker with custom text in the day cellsAngular Material datepicker 在日单元格中带有自定义文本
【发布时间】：2021-06-09 10:43:18
【问题描述】：

我正在寻找构建一个角度材料日期选择器（Angular Material 11），但我需要一个小功能，但我似乎无法破解。

它需要如下图所示：

我遇到的问题是出现在每个日单元格中的额外文本。我尝试了 [dateClass] 属性，但无济于事：

模板：

<mat-datepicker [dateClass]="dateClassArrow"></mat-datepicker>

.ts 组件：

constructor(availableItemsService...) {}

dateClassArrow = date => {
  const noItems: string = this.availableItemsService.getAvailableItems(date);
  document.documentElement.style.setProperty('--availableItems', noItems);
  return 'class-that-contains-content';
}

.scss


:root {
  --availableItems: 1;
}

.class-that-contains-content {
  ...
}

.class-that-contains-content:before {
  content: --availableItems;
}

也试过不带:before, like

.class-that-contains-content {
  content: attr(--availableMaterials);
}

任何提示或帮助将不胜感激。

【问题讨论】：

更接近stackoverflow.com/questions/59458789/… about show tooltip

标签： angular datepicker angular-material

【解决方案1】：

我阅读了这些博客，对如何做到这一点有了很多了解。

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3,

https://mariazacharia-k.medium.com/build-a-custom-calendar-with-angular-material-calendar-ebb6806308e5

第二个有一个很好的实现，可以为特定日期的背景添加颜色变化。

我最终这样做了：

这是我的 .ts 文件：

import { Component, AfterViewInit, ViewChild, Renderer2 } from '@angular/core';
import { MatCalendar } from '@angular/material/datepicker';
import { Moment } from 'moment';

@Component({
  selector: 'calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements AfterViewInit {
  @ViewChild('calendar') calendar: MatCalendar<Moment>;
  selectedDate: Moment;

  constructor(private _renderer: Renderer2) {

  }

  ngAfterViewInit() {
    const monthPrevBtn = document.querySelectorAll('.mat-calendar-previous-button');
    const monthNextBtn = document.querySelectorAll('.mat-calendar-next-button');

    if (monthPrevBtn) {
      Array.from(monthPrevBtn).forEach((button) => {
        this._renderer.listen(button, 'click', (event) => {
          this.updateCalendar();
        });
      });
    }

    if (monthNextBtn) {
      Array.from(monthNextBtn).forEach((button) => {
        this._renderer.listen(button, 'click', (event) => {
          this.updateCalendar();
        });
      });
    }

    this.updateCalendar();
  }

  handleMonthSelected(event) {
    this.updateCalendar();
  }

  updateCalendar() {
    setTimeout(() => {
      const cells = Array.from(document.querySelectorAll<HTMLDivElement>('.mat-calendar .mat-calendar-body-cell-content'));

      cells.forEach(c => {
        c.innerText = c.innerText.length == 1 ? '0' + c.innerText : c.innerText;
        c.innerHTML = '<div class="row"><div class="col-12" style="font-size:1.5em;">' + c.innerText + '</div><div class="col-12">' + 1 + '</div></div>';//TODO: check date and data and use number from that.
      });

    });
  }
}

这是我的html：

<div class="calendar-wrapper">
  <mat-calendar (monthSelected)="handleMonthSelected($event)" #calendar [(selected)]="selectedDate">
  </mat-calendar>
</div>

即使您更改月份，这也会处理日历格式。

【讨论】：