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

Posted 2023-05-07

【中文标题】在剑道调度程序 MVC 上设置颜色

【英文标题】：Set color per even on kendo scheduler 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，我刚刚更新并包含了代码作为文本

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