DevExtreme React - 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 option.

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
    ],
    // ...
})

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 option; 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
    ],
    // ...
})
See Also