设置每个甚至在剑道调度MVC颜色

问题描述 投票:2回答:1

我这里有一个网格,显示所有从数据库具有其状态为“打开”的项目。现在我想呈现出不同的颜色对调度的每个项目。目前,它的显示具有相同的颜色,这可能会让用户感到困惑的项目。请参阅下面的屏幕和代码的图像。

@(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"))
        )
)

调度显示:display

调度代码:code

先感谢您。

model-view-controller kendo-ui kendo-scheduler
1个回答
1
投票

我有同样的问题,我的事件模板内分配一类特殊的和做一些额外的魔法一旦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);
    }
}

如果我没有记错,因为款式不以其他方式施加在qazxsw poi的东西是必要的。

© www.soinside.com 2019 - 2024. All rights reserved.