CODEWITHSUNDEEP
angularjskendo-uikendo-schedulerkendo-datasource
Sameer Khan
Sameer Khan

Reputation: 147

How to toggle between week and workWeek in kendo ui scheduler

I have a requirement to toggle between the view in kendo UI scheduler, my view will be week but on checkbox click i want to change week view type between week and workWeek; how to do this?

Here is 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 code

$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);

Upvotes: 0

Views: 389

Answers (1)

Shai
Shai

Reputation: 3872

You can enable this view by adding the view type "workWeek" to the views array of the scheduler options object from the get go.

This will also show a view selection on the scheduler top toolbar but you can remove it by adding a CSS rule:

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

Switching between views can be done using the scheduler's view method:

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

Here's a Plunker with a demo.

Upvotes: 2

Related Questions