如何改变Mat-Calandar的显示值?

我在我的项目中准备了一个考勤日历。我可以显示一个垫子日历和头灯日期与他的出勤状态。

现在,我想显示 timeIn & timeOut 在各自的日期 mat-calendar.

我的服务器数据是这样的

attendance = [
    { attDate: '2020-04-01', timeIn: '09:00', timeOut: '21:00', status: null },
    { attDate: '2020-04-21', timeIn: '09:00', timeOut: '21:00', status: 'A' },
  ];

日期显示为

      1

09:00 - 21:00

     21

09:00 - 21:00

如何改变显示值 mat-calendar?

a 爆料 是为了快速参考而创建的。

我使用的是 Angular9Angular Material

解决方案:

我找到的唯一的方法是使用以下方法添加时间 之后 伪元素。我使用了 attr() css函数来设置时间内容,但你可以使用css变量和 var() 功能也是如此。

// app.component.ts
...

export class AppComponent implements AfterViewInit {
  ...

  constructor(
    private readonly elementRef: ElementRef) {
  }

  ngAfterViewInit() {
    const htmlElement: HTMLElement = this.elementRef.nativeElement;

    for (let [cellClass, date] of [
      ['holi-date', this.attendance[0]],
      ['green-date', this.attendance[1]]
    ] as const) {
      const dateElement = htmlElement.getElementsByClassName(cellClass).item(0);
      dateElement.setAttribute('data-date-time', `${date.timeIn} - ${date.timeOut}`);
    }
  }
// styles.scss
...

[data-date-time]::after {
  content: attr(data-date-time);
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 1em;
}

StackBlitz

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如何在Java中删除图像后重命名文件并删除原始文件?

2022-4-20 14:01:28

解决方案

安卓ListView在行末添加文本。

2022-4-20 14:01:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索