Skip to content

Commit 125f1c2

Browse files
arman-boyakhchyanarman-boyakhchyan
authored
Scheduler: Add View Switcher views info (DevExpress#8105)
1 parent 798409d commit 125f1c2

File tree

3 files changed

+49
-108
lines changed

3 files changed

+49
-108
lines changed

‎api-reference/10 UI Components/dxScheduler/1 Configuration/currentView.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@ When more than one view matches the **currentView** value, the Scheduler display
1717

1818
To subscribe to changes of the current view, use the [onOptionChanged](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/onOptionChanged.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onOptionChanged') handler.
1919

20+
[note]
21+
22+
- Be sure to include the **currentView** value in the **views** array.
23+
- If the **views** array is empty or contains a single item, Scheduler hides the view switcher.
24+
25+
[/note]
26+
2027
#####See Also#####
2128
- [Views](/concepts/05%20UI%20Components/Scheduler/060%20Views/010%20View%20Types/010%20Day%20View.md '/Documentation/Guide/UI_Components/Scheduler/Views/')
2229
- [View Switcher](/concepts/05%20UI%20Components/Scheduler/070%20View%20Switcher.md '/Documentation/Guide/UI_Components/Scheduler/View_Switcher/')

‎api-reference/10 UI Components/dxScheduler/1 Configuration/views/views.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,14 @@ An individual view's configuration. Set the [type](/api-reference/10%20UI%20Comp
3535

3636
For more information about how to customize an individual view, refer to the following topic: [Customize Individual Views](/concepts/05%20UI%20Components/Scheduler/060%20Views/020%20Customize%20Individual%20Views.md '/Documentation/Guide/UI_Components/Scheduler/Views/Customize_Individual_Views/').
3737

38-
To specify the default view, use the [currentView](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/currentView.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#currentView') property.
38+
To specify the current view, configure the [currentView](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/currentView.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#currentView') property.
39+
40+
[note]
41+
42+
- Be sure to include the **currentView** value in the **views** array.
43+
- If the **views** array is empty or contains a single item, Scheduler hides the view switcher.
44+
45+
[/note]
3946

4047
#include btn-open-demo with {
4148
href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/CustomizeIndividualViews/"

‎concepts/05 UI Components/Scheduler/070 View Switcher.md‎

Lines changed: 34 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
1-
View switcher is a scheduler element used for quick switching between views.
1+
The view switcher is a predefined [toolbar](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/) item that allows users to switch between Scheduler views.
22

33
![View Switcher](/images/UiWidgets/Scheduler_View_Switcher.png)
44

5-
To specify what views are available within the switcher, use the [views](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/') property.
5+
To specify available views, configure the [views](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/views '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/') array. To specify the current view, configure the [currentView](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#currentView) property:
66

77
---
88

99
##### jQuery
1010

11-
<!--JavaScript-->
11+
<!-- index.js -->
1212
$(function(){
1313
$("#schedulerContainer").dxScheduler({
1414
// ...
1515
views: ['day', 'week', 'agenda']
16+
currentView: 'day',
1617
});
1718
});
1819

1920
##### Angular
2021

21-
<!--HTML-->
22+
<!-- app.component.html -->
2223
<dx-scheduler ...
23-
[views]="['day', 'week', 'agenda']">
24-
</dx-scheduler>
24+
[views]="views"
25+
currentView="day"
26+
></dx-scheduler>
2527

26-
<!--TypeScript-->
28+
<!-- app.component.ts -->
2729
import { DxSchedulerModule } from "devextreme-angular";
30+
2831
// ...
2932
export class AppComponent {
30-
// ...
33+
views = ['day', 'week', 'agenda'];
3134
}
3235
@NgModule({
3336
imports: [
3437
// ...
3538
DxSchedulerModule
3639
],
37-
// ...
3840
})
3941

4042
##### Vue
@@ -43,126 +45,51 @@ To specify what views are available within the switcher, use the [views](/api-re
4345
<template>
4446
<DxScheduler
4547
:views="views"
48+
current-view="day"
4649
/>
4750
</template>
4851

4952
<script>
50-
import 'devextreme/dist/css/dx.light.css';
51-
52-
import DxScheduler from 'devextreme-vue/scheduler';
53-
54-
export default {
55-
components: {
56-
DxScheduler
57-
},
58-
data() {
59-
return {
60-
views: ['day', 'week', 'agenda']
61-
}
62-
}
63-
}
53+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
54+
55+
import { DxScheduler } from 'devextreme-vue/scheduler';
56+
57+
const views = ['day', 'week', 'agenda'];
6458
</script>
6559

6660
##### React
6761

68-
<!-- tab: App.js -->
62+
<!-- tab: App.tsx -->
6963
import React from 'react';
7064

71-
import 'devextreme/dist/css/dx.light.css';
72-
73-
import Scheduler from 'devextreme-react/scheduler';
65+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
66+
import { Scheduler } from 'devextreme-react/scheduler';
7467

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

77-
class App extends React.Component {
78-
render() {
79-
return (
80-
<Scheduler views={views} />
81-
);
82-
}
70+
function App () {
71+
return (
72+
<Scheduler
73+
views={views}
74+
currentView="day"
75+
/>
76+
);
8377
}
84-
export default App;
8578

8679
---
8780

88-
On mobile devices, the view switcher is displayed as a drop-down menu.
81+
[note]
8982

90-
![Drop-down View Switcher](/images/UiWidgets/Scheduler_DropDown_ViewSwitcher.png)
83+
- Be sure to include the **currentView** value in the **views** array.
84+
- If the **views** array is empty or contains a single item, Scheduler hides the view switcher.
9185

92-
To use the drop-down menu on all types of devices, assign **true** to the [useDropDownViewSwitcher](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/useDropDownViewSwitcher.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#useDropDownViewSwitcher') property; to use tabs - assign **false**.
86+
[/note]
9387

94-
---
95-
96-
#####jQuery
97-
98-
<!--JavaScript-->
99-
$(function(){
100-
$("#schedulerContainer").dxScheduler({
101-
// ...
102-
useDropDownViewSwitcher: true
103-
});
104-
});
88+
On mobile devices, Scheduler displays the view switcher as a drop-down menu:
10589

106-
#####Angular
107-
108-
<!--HTML-->
109-
<dx-scheduler ...
110-
[useDropDownViewSwitcher]="true">
111-
</dx-scheduler>
112-
113-
<!--TypeScript-->
114-
import { DxSchedulerModule } from "devextreme-angular";
115-
// ...
116-
export class AppComponent {
117-
// ...
118-
}
119-
@NgModule({
120-
imports: [
121-
// ...
122-
DxSchedulerModule
123-
],
124-
// ...
125-
})
126-
127-
##### Vue
128-
129-
<!-- tab: App.vue -->
130-
<template>
131-
<DxScheduler
132-
:use-drop-down-view-switcher="true" />
133-
</template>
134-
135-
<script>
136-
import 'devextreme/dist/css/dx.light.css';
137-
138-
import DxScheduler from 'devextreme-vue/scheduler';
139-
140-
export default {
141-
components: {
142-
DxScheduler
143-
}
144-
}
145-
</script>
146-
147-
##### React
148-
149-
<!-- tab: App.js -->
150-
import React from 'react';
151-
152-
import 'devextreme/dist/css/dx.light.css';
153-
154-
import Scheduler from 'devextreme-react/scheduler';
155-
156-
class App extends React.Component {
157-
render() {
158-
return (
159-
<Scheduler useDropDownViewSwitcher={true} />
160-
);
161-
}
162-
}
163-
export default App;
90+
![Drop-down View Switcher](/images/UiWidgets/Scheduler_DropDown_ViewSwitcher.png)
16491

165-
---
92+
To integrate the drop-down menu view switcher on other devices, enable [useDropDownViewSwitcher](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/useDropDownViewSwitcher.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#useDropDownViewSwitcher').
16693

16794
#####See Also#####
16895
- [Scheduler - View Types](/concepts/05%20UI%20Components/Scheduler/060%20Views/010%20View%20Types '/Documentation/Guide/UI_Components/Scheduler/Views/View_Types/')

0 commit comments

Comments
 (0)