Skip to content

Commit 1a5cc62

Browse files
sjbursjbur
authored
Scheduler: Create appointment by selected range — add react demo to storybook (DevExpress#33470)
1 parent da081ca commit 1a5cc62

2 files changed

Lines changed: 237 additions & 0 deletions

File tree

‎apps/react-storybook/stories/demos/scheduler/create-from-selection/CreateFromSelection.stories.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
2+
import type { SelectionEndEvent } from 'devextreme/ui/scheduler';
3+
import React, { useCallback } from 'react';
4+
5+
import Scheduler, {
6+
Resource,
7+
View,
8+
} from 'devextreme-react/scheduler';
9+
10+
import { data, priorityData } from './data';
11+
12+
const meta: Meta = {
13+
title: 'Demos/Scheduler/CreateFromSelection',
14+
parameters: {
15+
layout: 'padded',
16+
},
17+
};
18+
19+
export default meta;
20+
21+
type Story = StoryObj;
22+
23+
const currentDate = new Date(2021, 3, 21);
24+
const groups = ['priorityId'];
25+
26+
export const CreateFromSelection: Story = {
27+
render: () => {
28+
const onSelectionEnd = useCallback((e: SelectionEndEvent) => {
29+
const cells = e.selectedCellData;
30+
31+
if (cells.length <= 1) {
32+
return;
33+
}
34+
35+
const startDate = cells[0].startDateUTC || cells[0].startDate;
36+
const endDate = cells[cells.length - 1].endDateUTC || cells[cells.length - 1].endDate;
37+
38+
e.component.showAppointmentPopup({
39+
startDate,
40+
endDate,
41+
allDay: cells[0].allDay,
42+
...cells[0].groups,
43+
}, true);
44+
}, []);
45+
46+
return (
47+
<Scheduler
48+
timeZone="America/Los_Angeles"
49+
dataSource={data}
50+
groups={groups}
51+
defaultCurrentView="workWeek"
52+
defaultCurrentDate={currentDate}
53+
startDayHour={9}
54+
endDayHour={16}
55+
allDayPanelMode="allDay"
56+
onSelectionEnd={onSelectionEnd}
57+
>
58+
<View
59+
type="workWeek"
60+
groupOrientation="horizontal"
61+
cellDuration={30}
62+
/>
63+
<Resource
64+
fieldExpr="priorityId"
65+
allowMultiple={false}
66+
dataSource={priorityData}
67+
label="Priority"
68+
/>
69+
</Scheduler>
70+
);
71+
},
72+
};

‎apps/react-storybook/stories/demos/scheduler/create-from-selection/data.ts‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import type { SchedulerTypes } from 'devextreme-react/scheduler';
2+
3+
type Appointment = SchedulerTypes.Appointment & { priorityId: number };
4+
5+
type Resource = {
6+
text: string;
7+
id: number;
8+
color: string;
9+
};
10+
11+
export const data: Appointment[] = [
12+
{
13+
text: 'Website Re-Design Plan',
14+
priorityId: 2,
15+
startDate: new Date('2021-04-19T16:30:00.000Z'),
16+
endDate: new Date('2021-04-19T18:30:00.000Z'),
17+
}, {
18+
text: 'Book Flights to San Fran for Sales Trip',
19+
priorityId: 1,
20+
startDate: new Date('2021-04-22T17:00:00.000Z'),
21+
endDate: new Date('2021-04-22T19:00:00.000Z'),
22+
}, {
23+
text: 'Install New Router in Dev Room',
24+
priorityId: 1,
25+
startDate: new Date('2021-04-19T20:00:00.000Z'),
26+
endDate: new Date('2021-04-19T22:30:00.000Z'),
27+
}, {
28+
text: 'Approve Personal Computer Upgrade Plan',
29+
priorityId: 2,
30+
startDate: new Date('2021-04-20T17:00:00.000Z'),
31+
endDate: new Date('2021-04-20T18:00:00.000Z'),
32+
}, {
33+
text: 'Final Budget Review',
34+
priorityId: 2,
35+
startDate: new Date('2021-04-20T19:00:00.000Z'),
36+
endDate: new Date('2021-04-20T20:35:00.000Z'),
37+
}, {
38+
text: 'New Brochures',
39+
priorityId: 2,
40+
startDate: new Date('2021-04-19T20:00:00.000Z'),
41+
endDate: new Date('2021-04-19T22:15:00.000Z'),
42+
}, {
43+
text: 'Install New Database',
44+
priorityId: 1,
45+
startDate: new Date('2021-04-20T16:00:00.000Z'),
46+
endDate: new Date('2021-04-20T19:15:00.000Z'),
47+
}, {
48+
text: 'Approve New Online Marketing Strategy',
49+
priorityId: 2,
50+
startDate: new Date('2021-04-21T19:00:00.000Z'),
51+
endDate: new Date('2021-04-21T21:00:00.000Z'),
52+
}, {
53+
text: 'Upgrade Personal Computers',
54+
priorityId: 1,
55+
startDate: new Date('2021-04-19T16:00:00.000Z'),
56+
endDate: new Date('2021-04-19T18:30:00.000Z'),
57+
}, {
58+
text: 'Prepare 2021 Marketing Plan',
59+
priorityId: 2,
60+
startDate: new Date('2021-04-22T18:00:00.000Z'),
61+
endDate: new Date('2021-04-22T20:30:00.000Z'),
62+
}, {
63+
text: 'Brochure Design Review',
64+
priorityId: 1,
65+
startDate: new Date('2021-04-21T18:00:00.000Z'),
66+
endDate: new Date('2021-04-21T20:30:00.000Z'),
67+
}, {
68+
text: 'Create Icons for Website',
69+
priorityId: 2,
70+
startDate: new Date('2021-04-23T17:00:00.000Z'),
71+
endDate: new Date('2021-04-23T18:30:00.000Z'),
72+
}, {
73+
text: 'Upgrade Server Hardware',
74+
priorityId: 1,
75+
startDate: new Date('2021-04-23T16:00:00.000Z'),
76+
endDate: new Date('2021-04-23T22:00:00.000Z'),
77+
}, {
78+
text: 'Submit New Website Design',
79+
priorityId: 2,
80+
startDate: new Date('2021-04-23T23:30:00.000Z'),
81+
endDate: new Date('2021-04-24T01:00:00.000Z'),
82+
}, {
83+
text: 'Launch New Website',
84+
priorityId: 2,
85+
startDate: new Date('2021-04-23T19:20:00.000Z'),
86+
endDate: new Date('2021-04-23T21:00:00.000Z'),
87+
}, {
88+
text: 'Google AdWords Strategy',
89+
priorityId: 1,
90+
startDate: new Date('2021-04-26T16:00:00.000Z'),
91+
endDate: new Date('2021-04-26T19:00:00.000Z'),
92+
}, {
93+
text: 'Rollout of New Website and Marketing Brochures',
94+
priorityId: 1,
95+
startDate: new Date('2021-04-26T20:00:00.000Z'),
96+
endDate: new Date('2021-04-26T22:30:00.000Z'),
97+
}, {
98+
text: 'Non-Compete Agreements',
99+
priorityId: 2,
100+
startDate: new Date('2021-04-27T20:00:00.000Z'),
101+
endDate: new Date('2021-04-27T22:45:00.000Z'),
102+
}, {
103+
text: 'Approve Hiring of John Jeffers',
104+
priorityId: 2,
105+
startDate: new Date('2021-04-27T16:00:00.000Z'),
106+
endDate: new Date('2021-04-27T19:00:00.000Z'),
107+
}, {
108+
text: 'Update NDA Agreement',
109+
priorityId: 1,
110+
startDate: new Date('2021-04-27T18:00:00.000Z'),
111+
endDate: new Date('2021-04-27T21:15:00.000Z'),
112+
}, {
113+
text: 'Update Employee Files with New NDA',
114+
priorityId: 1,
115+
startDate: new Date('2021-04-30T16:00:00.000Z'),
116+
endDate: new Date('2021-04-30T18:45:00.000Z'),
117+
}, {
118+
text: 'Submit Questions Regarding New NDA',
119+
priorityId: 1,
120+
startDate: new Date('2021-04-28T17:00:00.000Z'),
121+
endDate: new Date('2021-04-28T18:30:00.000Z'),
122+
}, {
123+
text: 'Submit Signed NDA',
124+
priorityId: 1,
125+
startDate: new Date('2021-04-28T20:00:00.000Z'),
126+
endDate: new Date('2021-04-28T22:00:00.000Z'),
127+
}, {
128+
text: 'Review Revenue Projections',
129+
priorityId: 2,
130+
startDate: new Date('2021-04-28T18:00:00.000Z'),
131+
endDate: new Date('2021-04-28T21:00:00.000Z'),
132+
}, {
133+
text: 'Comment on Revenue Projections',
134+
priorityId: 2,
135+
startDate: new Date('2021-04-26T17:00:00.000Z'),
136+
endDate: new Date('2021-04-26T20:00:00.000Z'),
137+
}, {
138+
text: 'Provide New Health Insurance Docs',
139+
priorityId: 2,
140+
startDate: new Date('2021-04-30T19:00:00.000Z'),
141+
endDate: new Date('2021-04-30T22:00:00.000Z'),
142+
}, {
143+
text: 'Review Changes to Health Insurance Coverage',
144+
priorityId: 2,
145+
startDate: new Date('2021-04-29T16:00:00.000Z'),
146+
endDate: new Date('2021-04-29T20:00:00.000Z'),
147+
}, {
148+
text: 'Review Training Course for any Omissions',
149+
priorityId: 1,
150+
startDate: new Date('2021-04-29T18:00:00.000Z'),
151+
endDate: new Date('2021-04-29T21:00:00.000Z'),
152+
},
153+
];
154+
155+
export const priorityData: Resource[] = [
156+
{
157+
text: 'Low Priority',
158+
id: 1,
159+
color: '#1D90FF',
160+
}, {
161+
text: 'High Priority',
162+
id: 2,
163+
color: '#FF9747',
164+
},
165+
];

0 commit comments

Comments
 (0)