Как использовать ng-шаблон в угловых календарных неделях для отображения часов определенного дня в другом цвете

Question

Я использую mattlewis Angular calendar , чтобы реализовать просмотр недели для моего проекта.Мне нужно показать определенное время дня в неделе с другим цветом фона.

Я не смог найти вход или другой способ (с помощью ng-шаблона) для рендеринга конкретной ячейки в виде недели с другим цветом фона.

Я хочу что-то подобное, когда фон определенных часов в просмотре недели отображается в разном цвете.

Нужны предложения / помощьс этим.

Спасибо.

Пожалуйста, предложите изменения в этой демонстрации 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

Или просто щелкните событие на демонстрационном сайте проекта.