如何在 kendo ui 调度器中切换工作周和工作周

Question

我需要在 kendo UI 调度程序中的视图之间切换，我的视图将是周，但在复选框上单击我想在周和工作周之间更改周视图类型；怎么做？

这里是html

<label><input type="checkbox" ng-model="hideWeekend" ng-change="hideWeekends(hideWeekend);" value="true" />Hide Weekend</label>

<div id="team-schedule">
                        <div kendo-tooltip k-content="tooltipContent" k-filter="'.k-event'" class="k-group">
                            <div id="target"></div>
                            <div kendo-scheduler="weeklyScheduler" k-options="weeklySchedulerOptions" id="scheduler"></div>
                        </div>
                    </div>

JS代码

$scope.schedulerDS = new kendo.data.SchedulerDataSource({
        batch: true,
        filter: {
            logic: "or",
            filters: [
              { field: "ownerId", operator: "eq", value: 1 },
              { field: "ownerId", operator: "eq", value: 2 }
            ]
        }
    });

var weekOrWorkWeek = 'workWeek';
$scope.loadWeeklySchedule = function (value) {
        $scope.weeklySchedulerOptions = {
            autoBind: false,
            date: new Date(),
            height: 600,
            views: [{ type: value, selected: true, majorTick: 15, footer: false, allDaySlot: false }],
            timezone: "Etc/UTC",
            dataSource: $scope.schedulerDS,
            resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" },
                { text: "Charlie", value: 3, color: "#56ca85" }
                ]
            }
            ]
        };
    };

$scope.hideWeekends = function (value) {
        if (value == true) {
            weekOrWorkWeek = 'workWeek';
            $scope.loadWeeklySchedule(weekOrWorkWeek);
            $scope.weeklySchedulerOptions.dataSource.read();
        } else {
            weekOrWorkWeek = 'week';
            $scope.loadWeeklySchedule(weekOrWorkWeek);
            $scope.weeklySchedulerOptions.dataSource.read();
        }
    };
    $scope.loadWeeklySchedule(weekOrWorkWeek);

Answer 1

您可以通过从一开始就将视图类型 "workWeek" 添加到调度程序选项对象的视图数组来启用此视图。

这还将在调度程序顶部工具栏上显示视图选择，但您可以通过添加 CSS 规则将其删除：

.k-scheduler-views {
  display: none;
}

可以使用调度程序的视图方法在视图之间切换：

$("#scheduler").data("kendoScheduler").view("ViewName")

这是一个Plunker with a demo。

如何在 kendo ui 调度器中切换工作周和工作周

How to toggle between week and workWeek in kendo ui scheduler

kendo-ui

angularjs

kendo-scheduler

kendo-datasource