JavaScript/jQuery Scheduler - View Switcher
View switcher is a scheduler element used for quick switching between views.
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.
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
Feedback