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

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

可以通过添加视图类型“工作周”到的调度器选择的意见阵列启用该视图从对象该走了。

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

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

：

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

视图之间切换可以使用调度的观点，方法来实现

这是Plunker with a demo。