Reputation: 5055
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.
Need suggestions/help with this.
Thanks.
Please suggest changes through this stackblitz demo.
Upvotes: 5
Views: 7037
Reputation: 101
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!
Upvotes: 3
Reputation: 2243
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.
Upvotes: 1