Angular Scheduler - 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.

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 property; to use tabs - assign false.

HTML
TypeScript
  • <dx-scheduler ...
  • [useDropDownViewSwitcher]="true">
  • </dx-scheduler>
  • import { DxSchedulerModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })
See Also