如何设置 Kendo 日程安排者周末的样式

Question

我下面有kendo调度程序，有没有办法为周末设置不同的背景样式。

 @(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 的演示中获得的示例图片。突出显示的部分应使用不同的背景颜色

Answer 1

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

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

Answer 2

在 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'
            }
        }
    }
}

当您传递 Html 元素时，

slotByElement 方法会为您安排一天。从那里你可以检查是否是周末。

工作 fiddle，周末标记为 "week" 和 "month" 观看次数。

Answer 3

您可以使用 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>

如何设置 Kendo 日程安排者周末的样式

How to style Kendo Scheduler's weekend

telerik-mvc

kendo-ui

kendo-asp.net-mvc

kendo-scheduler