Как я могу настроить цвет заголовков времени в планировщике пользовательского интерфейса Kendo?

Здесь показана хорошая демонстрация планировщика kendo jquery http://demos.telerik.com/kendo-ui/web/scheduler/index.html

Мои вопросы: возможно ли изменить цвета ячеек заголовка даты (т.е. ячейки слева от каждой строки, содержащей дату).. например, я хочу, чтобы первые 8 часов были окрашены в зеленый цвет, следующие восемь - в красный и скоро


jquery kendo-ui kendo-scheduler kendo-template
person Abdelwahed    schedule 27.01.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ячейка заголовка даты отображается на панели инструментов вверху; то, о чем вы говорите, - это ячейки заголовка времени.

Я не думаю, что есть вариант конфигурации - вы можете попробовать использовать majorTimeHeaderTemplate следующим образом:

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"
    }]
});

(демонстрация)

К сожалению, вы не можете изменить стиль контейнера с помощью шаблона, поэтому, если вам не нравятся пробелы, вам придется изменить исходный код в kendo.ui.DayView.fn._layout; Я только вставляю сюда соответствующий отрывок — идея состоит в том, чтобы добавить еще один класс в строку в зависимости от часа:

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);
});

(демонстрация)

Вы можете использовать аналогичный подход для других типов представлений.

person Lars Höppner    schedule 28.01.2014
comment
Спасибо. Это почти то, что я хотел. Можно ли покрыть всю ячейку времени указанным цветом (подумайте об этом как о полной ячейке со сплошными границами, содержащей 11 утра, окрашенной в голубой цвет, но без окружающего белого пространства) - person Abdelwahed; 31.01.2014
comment
не только с шаблонами - вам нужно попробовать решение CodingWithSpike (хотя оно имеет ограничение, заключающееся в том, что вы не можете раскрашивать по часам, поэтому, когда вы хотите использовать такие вещи, как часы работы, это может не сработать для вас); другая альтернатива - изменить исходный код kendo.ui.DayView (я обновил ответ) - person Lars Höppner; 31.01.2014
comment
@Abdelwahed это сработало для вас или вам все еще нужна помощь с этой проблемой? - person Lars Höppner; 06.02.2014

arrow_upward
0
arrow_downward

Вы должны быть в состоянии сделать это с помощью CSS. Что-то типа:

.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;
}
person CodingWithSpike    schedule 28.01.2014