如何隐藏kendoui Scheduler中的时隙

时间:2018-03-26 05:28:25

标签: angularjs kendo-ui kendo-scheduler

我能够隐藏一整天,并将显示的小时数减少到一行。但是我无法隐藏这一行。

enter image description here

调度程序是垂直分组调度程序,右侧是房间号,顶部是日期。这个代码是

CXCallDirectoryManager.reloadExtension(identifier:completion:)

在这里,我尝试使用jquery和CSS删除行,但似乎没有任何工作

<!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中完成的。

enter image description here

1 个答案:

答案 0 :(得分:1)

删除其中一个广告位的一种方法是设置allDaySlot:false,例如在dojo page中完成。