如何在kendo调度程序中切换week和workWeek

Question

我需要在kendo调度器中的视图之间切换，我的视图将是星期，但是在复选框单击我想要在周和workWeek之间更改周视图类型；如何做到这一点？

这里是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

可以通过从get到调度器options对象的视图数组中添加视图类型"workWeek“来启用此视图。

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

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

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

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

这是一个带有演示的柱塞。