All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

View Switcher

View switcher is a scheduler element used for quick switching between views.

View Switcher

To specify what views are available within the switcher, use the views property.

jQuery
JavaScript
$(function(){
    $("#schedulerContainer").dxScheduler({
        // ...
        views: ['day', 'week', 'agenda']
    });
});
Angular
HTML
TypeScript
<dx-scheduler ...
    [views]="['day', 'week', 'agenda']">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScheduler
        :views="views"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            views: ['day', 'week', 'agenda']
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

const views = ["day", "week", "agenda"];

class App extends React.Component {
    render() {
        return (
            <Scheduler views={views} />
        );
    }
}
export default App;

On mobile devices, the view switcher is displayed as a drop-down menu.

Drop-down View Switcher

To use the drop-down menu on all types of devices, assign true to the useDropDownViewSwitcher property; to use tabs - assign false.

jQuery
JavaScript
$(function(){
    $("#schedulerContainer").dxScheduler({ 
        // ...
        useDropDownViewSwitcher: true
    });
});
Angular
HTML
TypeScript
<dx-scheduler ...
    [useDropDownViewSwitcher]="true">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScheduler
        :use-drop-down-view-switcher="true" />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

class App extends React.Component {
    render() {
        return (
            <Scheduler useDropDownViewSwitcher={true} />
        );
    }
}
export default App;
See Also