如何设计 Kendo Scheduler 的周末答案

【问题标题】：How to style Kendo Scheduler's weekend如何设计 Kendo Scheduler 的周末
【发布时间】：2018-09-16 23:41:48
【问题描述】：

我下面有剑道调度器，有没有办法为周末设置不同的背景样式。

 @(Html.Kendo().Scheduler<CalenderTaskModel>()
            .Name("scheduler")
            .Footer(false)
            .Editable(false)
            .EventTemplateId("eventTemplate")
            .Timezone("Etc/UTC")
            .Views(views =>
            {
                views.AgendaView(view => view.Title("Week"));
                views.MonthView(view => view.Selected(true).EventHeight(15).Title("Month"));
            })
            .Resources(resource =>
            {
                resource.Add(m => m.ResourceID)
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new[] {
                        new { Text = "Resource 1", Value = "Resource1"} ,
                        new { Text = "Resource 2", Value = "Resource2"}
                        });
            })
            .DataSource(d => d
            .Read("GetCalenderSummary", "Home"))
        )


       <script id="eventTemplate" type="text/x-kendo-template">
            # if(ResourceID === 'Resource1') { #
                <a class='t-resource1'>#: title #</a>
            # } else if (ResourceID === 'Resource2') { #
                <a class='t-resource2'>#: title #</a>
            # } #
        </script>

我不想在周末设置活动的背景样式，但我想自己设置一天（周末）的背景。

下面是我从 Telerik 的演示中获得的示例图片。突出显示的部分应为不同的背景颜色

【问题讨论】：

您是否尝试过以下任何解决方案？
检查接受的答案

标签： kendo-ui kendo-asp.net-mvc telerik-mvc kendo-scheduler

【解决方案1】：

你可以使用dayTemplate:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
  
  <style>
    .k-scheduler-content td {
      padding: 0;
    }
    
    .weekend {
      background-color: red;
      height: 100%;
      padding: 5px;
    }
  </style>
  
</head>
<body>
  
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "month",
      dayTemplate: (e) => "<div" + (e.date.getDay() === 0 || e.date.getDay() === 6 ? " class='weekend'>" : ">") + e.date.getDate() + "</div>"
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>
</body>
</html>

【讨论】：

【解决方案2】：

假设星期日总是第一列，星期六是最后一列，您可以使用以下 css：

.k-scheduler-monthview .k-scheduler-table td:first-child,
.k-scheduler-monthview .k-scheduler-table td:last-child {
    background-color: grey;
}

【讨论】：

【解决方案3】：

在dataBound 活动中，您可以查看所有日期并查看它是星期几。

dataBound: function(e) {
    var view = this.viewName();

    if(view == 'week' || view == 'month'){
        var days = this.view().content.find("td");
        for(var i = 0; i < days.length; i++){
            var slot = this.slotByElement(days[i]);
            var date = new Date(slot.startDate);
            var isWeekend = date.getDay() == 0 || date.getDay() == 6;
            if(isWeekend){
                days[i].style.background = '#4CAF50'
            }
        }
    }
}

slotByElement 方法会在您传递 Html 元素时为您安排日程。从那里您可以检查是否是周末。

工作 fiddle 周末被标记为“周”和“月”视图。

【讨论】：