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

Different background color for events

1 Answer 248 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
James
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
0
Accepted
Martin
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):
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
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.
Tags
Scheduler
Asked by
James
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or