Different background color for events

[James]

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?

[Martin]

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):
https://stackblitz.com/edit/angular-men75l-ubibqb?file=app/app.component.ts
To overwrite the default CSS styles, we need to set the encapsulation property to ViewEncapsulation.None.

The important parts are marked in red below:

@Component({
  selector: 'my-app',
  template: `
        <kendo-scheduler [kendoSchedulerBinding]="events"
        [selectedDate]
        ="selectedDate"
        style="height: 600px;"
        >
         <ng-template kendoSchedulerEventTemplate let-event="event">
            <div [ngClass]="event.id % 2 === 0 ? 'even' : 'odd'">{{event.title}}
            (ID: {{event.id}}) </div>
         </ng-template>

            <kendo-scheduler-day-view  [startTime]="startTime">
            </kendo-scheduler-day-view>

            <kendo-scheduler-week-view [startTime]="startTime">
            </kendo-scheduler-week-view>

            <kendo-scheduler-month-view>
            </kendo-scheduler-month-view>

            <kendo-scheduler-timeline-view>
            </kendo-scheduler-timeline-view>

            <kendo-scheduler-agenda-view>
            </kendo-scheduler-agenda-view>
        </kendo-scheduler>
    `,
  encapsulation: ViewEncapsulation.None,
  styles: [`
    kendo-scheduler .k-event>div, .k-event>div {
      height: 100%;
      position: absolute;
      width: 100%;
    }
    .even{
      background-color: rgb(249, 112, 112);
    }
    .odd{
      background-color: rgb(25, 214, 116);
    }
  `]
})

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

Regards,
Martin
Progress Telerik