如何在有角日歷周視圖中使用ng-template以不同的顏色顯示特定的一天時間

Question

我正在使用mattlewis Angular日歷為我的項目實施周視圖。 我需要以不同的背景色顯示一周中的特定時間。

我找不到輸入或其他方式（使用ng-template）以不同的背景色在周視圖中呈現特定單元格。

我想要這樣的東西，其中周視圖中特定時間的背景以差異顏色顯示。

需要建議/幫助。

謝謝。

請通過此stackblitz演示提出更改建議。

Answer 1

您可以選擇-

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CalendarEvent } from 'angular-calendar';

@Component({
  selector: 'mwl-demo-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'template.html'
})
export class DemoComponent {
  view: string = 'month';

  viewDate: Date = new Date();



  events = [
    {
      start: '2019-05-02',
      title: 'A 3 day event',
      color: {
        primary: "#ad2121",
        secondary: "#FAE3E3"
      },
    },
  ]

}

希望答案對您有所幫助！

Answer 2

只需為事件添加顏色：

events = [
  {
    start: '2019-05-02',
    title: 'A 3 day event',
    color: {
      primary: "#ad2121",
      secondary: "#FAE3E3"
    },
  },
]

請參閱Stackblitz解決方案： https ://stackblitz.com/edit/angular-edcv1t-bngiw7 ? embed =1& file = demo/component.ts

或者，只需在項目的演示站點上單擊事件。