Question

这里显示的是kendo jquery调度程序的一个很好的演示 http://demos.telerik.com/kendo-ui/web/scheduler/index.html

我的问题是：是否可以修改日期标题单元格的颜色（即包含日期的每行左侧的单元格）..例如，我希望前8小时颜色为绿色，下一步八红等等

Answer 1

日期标题单元格显示在顶部的工具栏中;你所说的是时间标题单元格。

我认为没有配置选项 - 您可以尝试使用这样的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"
    }]
});

（demo）

不幸的是，您无法使用模板更改容器的样式，因此如果您不喜欢空白，则必须修改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);
});

（demo）

您可以对其他视图类型使用类似的方法。

Answer 2

你应该可以用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;
}

如何在Kendo UI Scheduler中自定义时间标题的颜色？

2 个答案: