如何设计 Kendo Scheduler 的周末
Posted
技术标签:
【中文标题】如何设计 Kendo Scheduler 的周末【英文标题】：How to style Kendo Scheduler's weekend 【发布时间】：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 的演示中获得的示例图片。突出显示的部分应为不同的背景颜色
【问题讨论】：
您是否尝试过以下任何解决方案？ 检查接受的答案 【参考方案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 周末被标记为“周”和“月”视图。
【讨论】：
以上是关于如何设计 Kendo Scheduler 的周末的主要内容，如果未能解决你的问题，请参考以下文章
以分钟为单位显示时间间隔 - Kendo Scheduler
在 Kendo Scheduler 自定义模板中绑定 DropDownList（ASP.NET MVC Wrapper 版本）