This is a migrated thread and some comments may be shown as answers.

Different background color for events

1 Answer 248 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
James asked on 22 Mar 2019, 08:19 PM

Is there a way to style the background color of events depending on the type of event?  I know i can globally set the event background colors using something like this 

.k-event{background-color: #d5d5d5;}


but this doesn't help when different types of events have different colors.  I would imagine some type of class attribute on the SchedulerEvent object would achieve this but it doesn't exist.  Is there any work around for this?

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 26 Mar 2019, 09:21 AM
Hi James,

Indeed, at the moment there is no such built in feature that would allow to achieve the desired functionality. However, we could overwrite the default Kendo styles and use a kendoSchedulerEventTemplate to customize the content of the events as desired. 

In the following demo, I have implemented the case requirements by utilizing Angular's ngClass directive in order to apply different CSS classes per event type (in this example, if the TaskID is even or odd):
To overwrite the default CSS styles, we need to set the encapsulation property to ViewEncapsulation.None.

The important parts are marked in red below:
  selector: 'my-app',
  template: `
        <kendo-scheduler [kendoSchedulerBinding]="events"
        style="height: 600px;"
         <ng-template kendoSchedulerEventTemplate let-event="event">
            <div [ngClass]=" % 2 === 0 ? 'even' : 'odd'">{{event.title}}
            (ID: {{}}) </div>
            <kendo-scheduler-day-view  [startTime]="startTime">
            <kendo-scheduler-week-view [startTime]="startTime">
  encapsulation: ViewEncapsulation.None,
  styles: [`
    kendo-scheduler .k-event>div, .k-event>div {
      height: 100%;
      position: absolute;
      width: 100%;
      background-color: rgb(249, 112, 112);
      background-color: rgb(25, 214, 116);

I hope this helps. Let me know if any further assistance is required for this case.

Progress Telerik
Get quickly and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question