search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Angular 5 Scheduler Event cssClass

Asked by Anonymous
10 months ago.

Hi,

We want to change the appearance of scheduler events in the way show below:

https://doc.daypilot.org/scheduler/event-customization/

However, this does not appear to be working within Angular 5, as follows:

@Component({
selector: 'scheduler-component',
styles: ['.test {font-weight: bold;}'],
templateUrl: 'scheduler.component.html'
})
export class ActivitySchedulerComponent implements AfterViewInit {

ngAfterViewInit(): void {

this.scheduler.control.onBeforeEventRender = args => {
if (args) {
args.data.cssClass = "test";
}
}
}
}

Is this valid for Angular 5? It appears to be finding the CSS in the componenet decorator.

Answer posted by Dan Letecky [DayPilot]
10 months ago.

You need to target ":host ::ng-deep" to the CSS selector:

styles: [' :host ::ng-deep .test { font-weight: bold; } '], 

This style will be translated to something like this:

[_nghost-c1] .test {
    font-weight: bold;
}

The DOM elements inside the Scheduler don't get marked with the component identifier attribute (which is used for CSS encapsulation).

Another option is to add the class to the global CSS (styles.css).

This question is more than 6 months old and has been closed. Please create a new question if you have anything to add.