Skip to content

Commit 801a6b1

Browse files
aleksei-semikozovaleksei-semikozov
authored
Scheduler - Demos: update resources editors layout (#31924)
1 parent e2f37d7 commit 801a6b1

File tree

21 files changed

+559
-12
lines changed

21 files changed

+559
-12
lines changed

‎apps/demos/Demos/Scheduler/Agenda/Angular/app/app.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,27 @@
2323
icon="tags"
2424
>
2525
</dxi-scheduler-resource>
26+
27+
<dxo-scheduler-editing>
28+
<dxo-scheduler-form>
29+
<dxi-scheduler-item name="mainGroup">
30+
<dxi-scheduler-item name="subjectGroup"></dxi-scheduler-item>
31+
<dxi-scheduler-item name="dateGroup"></dxi-scheduler-item>
32+
<dxi-scheduler-item name="repeatGroup"></dxi-scheduler-item>
33+
<dxi-scheduler-item name="resourcesGroup">
34+
<dxi-scheduler-item
35+
name="assigneeIdGroup"
36+
[colCount]="3"
37+
[colCountByScreen]="{ xs: 3 }"
38+
>
39+
<dxi-scheduler-item name="assigneeIdIcon"></dxi-scheduler-item>
40+
<dxi-scheduler-item name="assigneeId"></dxi-scheduler-item>
41+
<dxi-scheduler-item name="priorityId"></dxi-scheduler-item>
42+
</dxi-scheduler-item>
43+
</dxi-scheduler-item>
44+
<dxi-scheduler-item name="descriptionGroup"></dxi-scheduler-item>
45+
</dxi-scheduler-item>
46+
<dxi-scheduler-item name="recurrenceGroup"></dxi-scheduler-item>
47+
</dxo-scheduler-form>
48+
</dxo-scheduler-editing>
2649
</dx-scheduler>

‎apps/demos/Demos/Scheduler/Agenda/React/App.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React from 'react';
2-
import Scheduler, { Resource, type SchedulerTypes } from 'devextreme-react/scheduler';
2+
import Scheduler, {
3+
Resource,
4+
Editing,
5+
Form as SchedulerForm,
6+
Item,
7+
type SchedulerTypes,
8+
} from 'devextreme-react/scheduler';
39
import ArrayStore from 'devextreme/data/array_store';
410
import { assignees, data, priorities } from './data.ts';
511

@@ -33,6 +39,25 @@ const App = () => (
3339
label="Priority"
3440
icon="tags"
3541
/>
42+
43+
<Editing>
44+
<SchedulerForm>
45+
<Item name="mainGroup">
46+
<Item name="subjectGroup" />
47+
<Item name="dateGroup" />
48+
<Item name="repeatGroup" />
49+
<Item name="resourcesGroup">
50+
<Item name="assigneeIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
51+
<Item name="assigneeIdIcon" />
52+
<Item name="assigneeId" />
53+
<Item name="priorityId" />
54+
</Item>
55+
</Item>
56+
<Item name="descriptionGroup" />
57+
</Item>
58+
<Item name="recurrenceGroup" />
59+
</SchedulerForm>
60+
</Editing>
3661
</Scheduler>
3762
);
3863

‎apps/demos/Demos/Scheduler/Agenda/ReactJs/App.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import React from 'react';
2-
import Scheduler, { Resource } from 'devextreme-react/scheduler';
2+
import Scheduler, {
3+
Resource,
4+
Editing,
5+
Form as SchedulerForm,
6+
Item,
7+
} from 'devextreme-react/scheduler';
38
import ArrayStore from 'devextreme/data/array_store';
49
import { assignees, data, priorities } from './data.js';
510

@@ -33,6 +38,29 @@ const App = () => (
3338
label="Priority"
3439
icon="tags"
3540
/>
41+
42+
<Editing>
43+
<SchedulerForm>
44+
<Item name="mainGroup">
45+
<Item name="subjectGroup" />
46+
<Item name="dateGroup" />
47+
<Item name="repeatGroup" />
48+
<Item name="resourcesGroup">
49+
<Item
50+
name="assigneeIdGroup"
51+
colCount={3}
52+
colCountByScreen={{ xs: 3 }}
53+
>
54+
<Item name="assigneeIdIcon" />
55+
<Item name="assigneeId" />
56+
<Item name="priorityId" />
57+
</Item>
58+
</Item>
59+
<Item name="descriptionGroup" />
60+
</Item>
61+
<Item name="recurrenceGroup" />
62+
</SchedulerForm>
63+
</Editing>
3664
</Scheduler>
3765
);
3866
export default App;

‎apps/demos/Demos/Scheduler/Agenda/Vue/App.vue‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,38 @@
2222
label="Priority"
2323
icon="tags"
2424
/>
25+
26+
<DxEditing>
27+
<DxSchedulerForm>
28+
<DxItem name="mainGroup">
29+
<DxItem name="subjectGroup"/>
30+
<DxItem name="dateGroup"/>
31+
<DxItem name="repeatGroup"/>
32+
<DxItem name="resourcesGroup">
33+
<DxItem
34+
:col-count="3"
35+
:col-count-by-screen="{ xs: 3 }"
36+
name="assigneeIdGroup"
37+
>
38+
<DxItem name="assigneeIdIcon"/>
39+
<DxItem name="assigneeId"/>
40+
<DxItem name="priorityId"/>
41+
</DxItem>
42+
</DxItem>
43+
<DxItem name="descriptionGroup"/>
44+
</DxItem>
45+
<DxItem name="recurrenceGroup"/>
46+
</DxSchedulerForm>
47+
</DxEditing>
2548
</DxScheduler>
2649
</template>
2750
<script setup lang="ts">
28-
import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
51+
import DxScheduler, {
52+
DxResource,
53+
DxEditing,
54+
DxForm as DxSchedulerForm,
55+
} from 'devextreme-vue/scheduler';
56+
import { DxItem } from 'devextreme-vue/form';
2957
import { ArrayStore } from 'devextreme-vue/common/data';
3058
import { data, assignees, priorities } from './data.ts';
3159

‎apps/demos/Demos/Scheduler/Agenda/jQuery/index.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,35 @@ $(() => {
2323
label: 'Priority',
2424
icon: 'tags',
2525
}],
26+
editing: {
27+
form: {
28+
items: [
29+
{
30+
name: 'mainGroup',
31+
items: [
32+
'subjectGroup',
33+
'dateGroup',
34+
'repeatGroup',
35+
{
36+
name: 'resourcesGroup',
37+
items: [
38+
{
39+
name: 'assigneeIdGroup',
40+
colCount: 3,
41+
colCountByScreen: {
42+
xs: 3,
43+
},
44+
items: ['assigneeIdIcon', 'assigneeId', 'priorityId'],
45+
},
46+
],
47+
},
48+
'descriptionGroup',
49+
],
50+
},
51+
'recurrenceGroup',
52+
],
53+
},
54+
},
2655
height: 600,
2756
});
2857
});

‎apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,29 @@
4141
>
4242
</dxi-scheduler-resource>
4343

44+
<dxo-scheduler-editing>
45+
<dxo-scheduler-form>
46+
<dxi-scheduler-item name="mainGroup">
47+
<dxi-scheduler-item name="subjectGroup"></dxi-scheduler-item>
48+
<dxi-scheduler-item name="dateGroup"></dxi-scheduler-item>
49+
<dxi-scheduler-item name="repeatGroup"></dxi-scheduler-item>
50+
<dxi-scheduler-item name="resourcesGroup">
51+
<dxi-scheduler-item
52+
name="priorityIdGroup"
53+
[colCount]="3"
54+
[colCountByScreen]="{ xs: 3 }"
55+
>
56+
<dxi-scheduler-item name="priorityIdIcon"></dxi-scheduler-item>
57+
<dxi-scheduler-item name="priorityId"></dxi-scheduler-item>
58+
<dxi-scheduler-item name="typeId"></dxi-scheduler-item>
59+
</dxi-scheduler-item>
60+
</dxi-scheduler-item>
61+
<dxi-scheduler-item name="descriptionGroup"></dxi-scheduler-item>
62+
</dxi-scheduler-item>
63+
<dxi-scheduler-item name="recurrenceGroup"></dxi-scheduler-item>
64+
</dxo-scheduler-form>
65+
</dxo-scheduler-editing>
66+
4467
<div *dxTemplate="let data of 'dateCellTemplate'">
4568
<div class="name">{{
4669
["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][data.date.getDay()]

‎apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React from 'react';
2-
import Scheduler, { Resource, View } from 'devextreme-react/scheduler';
2+
import Scheduler, {
3+
Resource,
4+
View,
5+
Editing,
6+
Form as SchedulerForm,
7+
Item,
8+
} from 'devextreme-react/scheduler';
39

410
import { data, priorityData, typeData } from './data.ts';
511

@@ -53,6 +59,25 @@ const App = () => (
5359
label="Type"
5460
allowMultiple={false}
5561
/>
62+
63+
<Editing>
64+
<SchedulerForm>
65+
<Item name="mainGroup">
66+
<Item name="subjectGroup" />
67+
<Item name="dateGroup" />
68+
<Item name="repeatGroup" />
69+
<Item name="resourcesGroup">
70+
<Item name="priorityIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
71+
<Item name="priorityIdIcon" />
72+
<Item name="priorityId" />
73+
<Item name="typeId" />
74+
</Item>
75+
</Item>
76+
<Item name="descriptionGroup" />
77+
</Item>
78+
<Item name="recurrenceGroup" />
79+
</SchedulerForm>
80+
</Editing>
5681
</Scheduler>
5782
);
5883

‎apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React from 'react';
2-
import Scheduler, { Resource, View } from 'devextreme-react/scheduler';
2+
import Scheduler, {
3+
Resource,
4+
View,
5+
Editing,
6+
Form as SchedulerForm,
7+
Item,
8+
} from 'devextreme-react/scheduler';
39
import { data, priorityData, typeData } from './data.js';
410

511
const currentDate = new Date(2021, 3, 27);
@@ -50,6 +56,29 @@ const App = () => (
5056
label="Type"
5157
allowMultiple={false}
5258
/>
59+
60+
<Editing>
61+
<SchedulerForm>
62+
<Item name="mainGroup">
63+
<Item name="subjectGroup" />
64+
<Item name="dateGroup" />
65+
<Item name="repeatGroup" />
66+
<Item name="resourcesGroup">
67+
<Item
68+
name="priorityIdGroup"
69+
colCount={3}
70+
colCountByScreen={{ xs: 3 }}
71+
>
72+
<Item name="priorityIdIcon" />
73+
<Item name="priorityId" />
74+
<Item name="typeId" />
75+
</Item>
76+
</Item>
77+
<Item name="descriptionGroup" />
78+
</Item>
79+
<Item name="recurrenceGroup" />
80+
</SchedulerForm>
81+
</Editing>
5382
</Scheduler>
5483
);
5584
export default App;

‎apps/demos/Demos/Scheduler/IndividualViewsCustomization/Vue/App.vue‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,43 @@
4040
field-expr="typeId"
4141
label="Type"
4242
/>
43+
44+
<DxEditing>
45+
<DxSchedulerForm>
46+
<DxItem name="mainGroup">
47+
<DxItem name="subjectGroup"/>
48+
<DxItem name="dateGroup"/>
49+
<DxItem name="repeatGroup"/>
50+
<DxItem name="resourcesGroup">
51+
<DxItem
52+
:col-count="3"
53+
:col-count-by-screen="{ xs: 3 }"
54+
name="priorityIdGroup"
55+
>
56+
<DxItem name="priorityIdIcon"/>
57+
<DxItem name="priorityId"/>
58+
<DxItem name="typeId"/>
59+
</DxItem>
60+
</DxItem>
61+
<DxItem name="descriptionGroup"/>
62+
</DxItem>
63+
<DxItem name="recurrenceGroup"/>
64+
</DxSchedulerForm>
65+
</DxEditing>
66+
4367
<template #dateCellSlot="{ data: dateCell }">
4468
<DateCell :cell-data="dateCell"/>
4569
</template>
4670
</DxScheduler>
4771
</template>
4872
<script setup lang="ts">
49-
import DxScheduler, { DxResource, DxView } from 'devextreme-vue/scheduler';
73+
import DxScheduler, {
74+
DxResource,
75+
DxView,
76+
DxEditing,
77+
DxForm as DxSchedulerForm,
78+
} from 'devextreme-vue/scheduler';
79+
import { DxItem } from 'devextreme-vue/form';
5080
import DateCell from './DateCell.vue';
5181
import { data, priorityData, typeData } from './data.ts';
5282

‎apps/demos/Demos/Scheduler/IndividualViewsCustomization/jQuery/index.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,34 @@ $(() => {
4646
dataSource: typeData,
4747
label: 'Type',
4848
}],
49+
editing: {
50+
form: {
51+
items: [
52+
{
53+
name: 'mainGroup',
54+
items: [
55+
'subjectGroup',
56+
'dateGroup',
57+
'repeatGroup',
58+
{
59+
name: 'resourcesGroup',
60+
items: [
61+
{
62+
name: 'priorityIdGroup',
63+
colCount: 3,
64+
colCountByScreen: {
65+
xs: 3,
66+
},
67+
items: ['priorityIdIcon', 'priorityId', 'typeId'],
68+
},
69+
],
70+
},
71+
'descriptionGroup',
72+
],
73+
},
74+
'recurrenceGroup',
75+
],
76+
},
77+
},
4978
});
5079
});

0 commit comments

Comments
 (0)