如何在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。