4

I am using mattlewis Angular calendar to implement week view for my project. I need to show a certain time of day in week with different background color.

I could not find an input or some other way (using ng-template) to render specific cell in week view with different background color.

I want something like this where background of specific hours in week view is shown in diff color.

enter image description here

Need suggestions/help with this.

Thanks.

Please suggest changes through this stackblitz demo.

Always_a_learner
  • 4,585
  • 13
  • 63
  • 112
  • Here is something that could maybe guide to to a possible solution. https://stackblitz.com/edit/angular-edcv1t-wedgdh I am not posting this as an answer, because it is not finished yet, but my time is running out. – Riscie May 09 '19 at 08:50

2 Answers2

3

You can go with - 

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"
      },
    },
  ]

}

I hope the answer helps you!

Manan
  • 101
  • 4
1

Just add the colors to your event:

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

See the Stackblitz solution: https://stackblitz.com/edit/angular-edcv1t-bngiw7?embed=1&file=demo/component.ts

Or just click the event on the demo site of the project.

Daniel Habenicht
  • 2,133
  • 1
  • 15
  • 36
  • Daniel Habenicht, Thanks for your answer. But this is not what I want to achieve. I can do event color changes using cssCLass property in events array. But that is not my requirement, I want to change particular hours background color. Thanks! – Always_a_learner May 06 '19 at 05:49