CODEWITHSUNDEEP
kendo-uikendo-scheduler
chiapa
chiapa

Reputation: 4412

Changing colors in Kendo Scheduler

I've got a Kendo Scheduler and I want to set the background of the events a different color, and achieved it partially by doing this:

Razor

@(Html.Kendo().Scheduler<MyProj.Models.MyModel>()
    .Name("scheduler")
    .Views(views =>
    {
        views.DayView();
        views.WeekView();
        views.MonthView(mv => mv.Selected(true));
    })
    .EventTemplateId("eventTemplate")
    ...

Javascript

<script id="eventTemplate" type="text/kendo-tmpl">
    <div class='asset-task' style='color: black; background-color: #=Color#'>
        #= Description #
    </div>
</script>

This works great, applying a background color from the model to events nicely. However, this is valid only for the month and agenda view, leaving the events in day and week views with the default background color, same for every event.

I have found this:

.AllDayEventTemplateId("eventDayTemplate")

And it effectively works, but only for "all day" events, not for others. For example, if an event is from 9:00 to 10:00 it isn't colored accordingly to the template definition.

The intellisense doesn't show any DayEventTemplate that I assume would be used for any day event, "all day" or not.

Is there any way of achieving this?

Upvotes: 0

Views: 4847

Answers (1)

D_Learning
D_Learning

Reputation: 1023

I have tried your approach and it seems to be working just as you want, please have a look at the example I created and used your logic: demo.

The only change I have done is added a css class to override the default ".k-event" and set the background and border to none. 

.k-event{
    background: none;
    border: none;
}

Perhaps this might solve your problem.

Alternatively there are other Options like use of resources: ref Resources ?
Another option is to update the event's div at data-bound event. This approach is explained here: data-bound event explanation

Please do let me know if above doesn't solve your issue.

Upvotes: 2

Related Questions