CODEWITHSUNDEEP
angularangular-calendar
Always_a_learner
Always_a_learner

Reputation: 5055

How to use ng-template in angular calendar week view to show certain day hours in different color

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.

Upvotes: 5

Views: 7037

Answers (2)

Manan
Manan

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

Daniel Habenicht
Daniel Habenicht

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

Related Questions