在 kendo 调度程序 MVC 上设置每个偶数的颜色

Question

我这里有一个网格，它显示了 Db 中状态为“打开”的所有项目。现在我想在调度程序上为每个项目显示不同的颜色。目前，它以相同的颜色显示项目，这会使用户感到困惑。请参阅下面的屏幕图像和代码。

@(Html.Kendo().Scheduler<Website.Models.ResourcePlanner.ResourcePlannerGridModel>()
        .Name("scheduler")
        .Date(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day))
        .StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second))
        .Height(600)
        .Views(views =>
        {

            views.WeekView(weekView => weekView.Selected(false));
            views.MonthView(monthView => monthView.Selected(true));
            views.AgendaView();
            views.TimelineView();
            views.TimelineMonthView();
        })
        .Resources(resource =>
        {
            resource.Add(m => m.Title)
            .Title("Room")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[]
            {
    new { Text = "Venue 101", Value = 1, Color = "#6eb4fa" },
    new { Text = "Venue 201", Value = 2, Color = "#f58a8a" }
            });
        })
        .DataSource(d => d
        .Model(m =>
        {
        })
        .Read(read => read.Action("Read", "ResourcePlanner"))          
       .Destroy(delete => delete.Action("Delete", "ResourcePlanner"))
        )
)

调度程序显示：

调度程序代码：

提前致谢。

Answer 1

我遇到了同样的问题，并通过在我的事件模板中分配一个特殊的 class 并在触发 DataBound 事件后执行一些额外的魔法来解决它。

// The template
<script type="text/x-kendo-template" id="event-template">
    <span class="customEvent eventAction#=Action#">
        <span class="title">#=title#</span><br />
        <span class="description">#=!description ? "" : description#</span>
    </span>
</script>

// The CSS
.pageScheduler .k-scheduler-content .eventAction1Applied,
.pageScheduler .k-scheduler-content .eventAction2Applied,
.pageScheduler .k-scheduler-content .eventAction3Applied {
    color: white;
}

.pageScheduler .k-scheduler-content .eventAction1Applied {
    background-color: rgb(0, 159, 227);
    border-color: rgb(0, 159, 227);
}

// The method to call on DataBound
function scheduledTasksDataBound() {
    var events = $(".customEvent");
    for (var i = 0; i < events.length; i++) {
        var event = $(events[i]);

        var bgClass = null;
        if (event.hasClass("eventAction1")) {
            bgClass = "eventAction1Applied";
        }
        else if (event.hasClass("eventAction2")) {
            bgClass = "eventAction2Applied";
        }
        else if (event.hasClass("eventAction3")) {
            bgClass = "eventAction3Applied";
        }
        event.parent().addClass(bgClass);
    }
}

如果我没记错的话，scheduledTasksDataBound 中的内容是必需的，因为否则不会应用样式。

在 kendo 调度程序 MVC 上设置每个偶数的颜色

Set color per even on kendo scheduler MVC

model-view-controller

kendo-ui

kendo-scheduler