如何在角度日历周视图中使用ng-template以不同颜色显示特定日期小时

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[highlightDate]'
})
export class HighlightDateDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
  }

  // 在ngOnInit生命周期钩子函数中，根据特定日期小时设置元素的样式
  ngOnInit() {
    const currentDate = new Date(); // 当前日期时间
    const targetDate = new Date('2022-01-01 12:00:00'); // 目标日期时间

    if (currentDate.getFullYear() === targetDate.getFullYear() &&
        currentDate.getMonth() === targetDate.getMonth() &&
        currentDate.getDate() === targetDate.getDate() &&
        currentDate.getHours() === targetDate.getHours()) {
      this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-calendar',
  template: `
    <ng-template highlightDate>
      <!-- 在这里放置特定日期小时的内容 -->
    </ng-template>
  `
})
export class CalendarComponent {
}

<angular-calendar-week-view [viewDate]="currentDate"></angular-calendar-week-view>