Question

我要求在kendo UI调度程序中切换视图，我的视图将是周，但是在复选框上单击我想在周和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

您可以通过添加视图类型＆＃34; workWeek＆＃34;来启用此视图。从get go开始，调度程序选项对象的views数组。

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

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

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

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

这里是Plunker with a demo。

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

1 个答案: