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

CSS Class on Events

2 Answers 356 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Dominick
Top achievements
Rank 1
Dominick asked on 26 Aug 2013, 08:34 PM
Is it possible to add a customer css class to the events? We have a circumstance where we're building out some custom filtering on the scheduler and we need to be able to dynamically it in the colors of the events with a legend for the filters. Also, in the future we may need to dynamically extend those filters; so, being able to apply a custom CSS class to the events based on a type would be extremely helpful.

Is there any way to pull this off currently?

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2013, 10:42 AM
Hello Dominick,

Currently the Scheduler events' appearance can be customized by setting an event template:

http://docs.kendoui.com/api/web/scheduler#configuration-eventTemplate

http://demos.kendoui.com/web/scheduler/templates.html

On the other hand, you can iterate over all events (div.k-event) in dataBound and apply custom CSS classes based on some values or conditions. The link between the datasource item and the event DOM element is the uid data attribute:

<div class="k-event" data-uid="8962f758-6a9f-45cd-ab7a-1a8d1d63f5b7">
    ...
</div>

var scheduler = $("#scheduler").data("kendoScheduler");
 
var eventDataItem = scheduler.dataSource.getByUid("8962f758-6a9f-45cd-ab7a-1a8d1d63f5b7");

http://docs.kendoui.com/api/framework/datasource#methods-getByUid

getByUid returns a Kendo UI Model instance:

http://docs.kendoui.com/api/framework/model

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dominick
Top achievements
Rank 1
answered on 27 Aug 2013, 02:59 PM
Thanks. I had a feeling templates would be the recommended solution. It will work; but it's a big heavy handed for what I actually need to do. 
Tags
Scheduler
Asked by
Dominick
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Dominick
Top achievements
Rank 1
Share this question
or