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

Question

我正在寻找构建一个角度材料日期选择器（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，比如

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

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

标签： angulardatepickerangular-material

Answer 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>

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