如何在kendoui Scheduler中隐藏时间段
如何在kendoui Scheduler中隐藏时间段
提问于 2018-03-26 13:28:25
我能够隐藏一整天，并将显示的小时数减少到只有一行。但我不能隐藏这一行。
调度器是垂直分组调度器，房间号在右边，日期在顶部。其代码是
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Angular Scheduler</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<style scoped>
.k-scheduler-toolbar,.k-scheduler-footer
{
/* make them invisible */
display: none;
/* prevent height and paddings from influencing the size calculations */
height: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div ng-cloak kendo-scheduler k-options="schedulerOptions">
<div k-event-template class="movie-template">
</div>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]).
controller("MyCtrl", function($scope){
$scope.schedulerOptions = {
eventHeight: 40,
majorTick: 1440,//set major tick to full day and leave the default startTime/endTime
minorTickCount: 1,//show only one minor tick
majorTimeHeaderTemplate: "",
timeSlot:false,
ShowTimeRuler :false,
editable: {
template: $("#customEditorTemplate").html()
},
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{
type: "week",
selected: true ,
dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M')#</span>"
},
"workWeek",
"month",
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
dataBound: function(e) {
//hide the times row from the date/time header:
var view = this.view();
view.datesHeader.find("tr:last").prev().hide();
view.timesHeader.find("tr:last").prev().hide();
//Required: remove only last table in dataBound when grouped
var tables = $(".k-scheduler-times .k-scheduler-table");
tables = tables.last();
var rows = tables.find("tr");
rows.each(function() {
$(this).children("th:last").hide();
});
},
//vertical grouping of rooms
group: {
resources: ["Rooms"],
orientation: "vertical"
},
//Rooms details
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Room 101", value: 1, color: "#6eb3fa" },
{ text: "Room 201", value: 2, color: "#f58a8a" },
{ text: "Room 301", value: 3, color: "#2c0eca" },
{ text: "Room 401", value: 4, color: "#ed8312" },
{ text: "Room 501", value: 5, color: "#2cdeca" },
{ text: "Room 601", value: 6, color: "#c3ff42" },
{ text: "Room 701", value: 7, color: "#3aeeca" },
{ text: "Room 801", value: 8, color: "#21d187" },
{ text: "Room 901", value: 9, color: "#5371a0" },
],
title: "Room"
},
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
})
</script>
</body>
</html>在这里，我尝试使用jquery和CSS删除行，但似乎都不起作用
$('td.k-nonwork-hour').remove();这只是删除我想要删除的特定行的颜色
我需要这样的东西。这是我在jQuery中完成的。
回答 1
Stack Overflow用户
发布于 2018-03-26 15:53:57
删除其中一个插槽的一种方法是设置allDaySlot：false，例如，在这个dojo page中就是这样做的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49484491
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号