How can I customize the color of the time headers in a Kendo UI Scheduler?

Question

Shown here is a good demo for kendo jquery scheduler http://demos.telerik.com/kendo-ui/web/scheduler/index.html

My questions is : is it possible to modify the colors of the date header cells (i.e. cell on the left of each row that contains the date).. for example I want the first 8 hours to be colored as green, next eight red and so on

Answer 1

The date header cell is shown in the toolbar on the top; what you're talking about are the time header cells.

I don't think there's a configuration option - you can try using the majorTimeHeaderTemplate like this:

window.colors = ["lightblue", "lightgreen", "lightgrey"];        
var template = "<div style='height:100%; width: 100%; background-color: " +
            "# var color = window.colors[Math.floor(date.getHours() / 8)]; # " +
    "#= color #;'><strong>#=kendo.toString(date, 'hh:mm')#</strong></div>";

$("#scheduler").kendoScheduler({
    date: new Date("2013/6/6"),
    majorTimeHeaderTemplate: kendo.template(template),
    dataSource: [{
        id: 1,
        start: new Date("2013/6/6 08:00 AM"),
        end: new Date("2013/6/6 09:00 AM"),
        title: "Interview"
    }]
});

(demo)

Unfortunately you can't change the style of the container using the template, so if you don't like the whitespace, you'd have to modify the source code in kendo.ui.DayView.fn._layout; I'm only pasting the relevant excerpt here - the idea is to add another class to the row depending on the hour:

this._forTimeRange(this.startTime(), this.endTime(), function (date, majorTick, middleRow, lastSlotRow) {
    var template = majorTick ? that.majorTimeHeaderTemplate : that.minorTimeHeaderTemplate;

    var colorClass = window.colors[Math.floor(date.getHours() / 8)];
    var row = {
        text: template({
            date: date
        }),
        className: lastSlotRow ? "k-slot-cell" : ""
    };
    row.className += colorClass; // we can then style the row using this selector

    rows.push(row);
});

(demo)

You could use a similar approach for other view types.

Answer 2

You should be able to do that with CSS. Something like:

.k-scheduler-times tr:nth-child(-n+8)
{
    background-color: green;
}

.k-scheduler-times tr:nth-child(n+9):nth-child(-n+16)
{
    background-color: red;
}