在剑道调度程序 MVC 上设置颜色答案

【问题标题】：Set color per even on kendo scheduler MVC在剑道调度程序 MVC 上设置颜色
【发布时间】：2019-07-01 09:25:16
【问题描述】：

我在这里有一个网格，它显示了 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"))
        )
)

调度器显示：

调度程序代码：

提前谢谢你。

【问题讨论】：

您能否将代码提供为文本而不是图像？复制和粘贴代码以重现您的问题比从图像重新输入更容易。
@Tetsuya Yamamoto，我刚刚更新并包含了代码作为文本

标签： model-view-controller kendo-ui kendo-scheduler

【解决方案1】：

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

// 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 中的内容是必要的，因为其他样式没有应用。

【讨论】：