Как переключаться между неделей и workWeek в kendo ui scheduler

Question

У меня есть требование переключаться между представлением в планировщике пользовательского интерфейса кендо, мое представление будет неделю, но на флажке. Я хочу изменить тип недели недели между week и 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

Вы можете включить этот вид, добавив тип вида "WorkWeek" на просмотры массива параметров планировщика объекта из пойдем.

Это также покажет выбор вида на планировщик верхней панели, но вы можете удалить его с помощью добавления правила CSS:

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

Переключение между режимами может быть сделано с помощью метода просмотра планировщика:

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

Адрес Plunker with a demo.