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

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

Answer 2

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

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

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

当您传递Html元素时，

slotByElement方法会为您提供调度程序。从那里你可以检查是否周末。

工作fiddle周末标记为＆＃34;周＆＃34;和＆＃34;月＆＃34;视图。

如何设置Kendo Scheduler的周末风格

3 个答案: