Skip to content

Commit ad42b53

Browse files
dmlvrdmlvr
committed
add reactjs demos for scheduler
1 parent 5320b66 commit ad42b53

File tree

138 files changed

+8791
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+8791
-0
lines changed

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useCallback, useRef } from 'react';
2+
import Scheduler, { Resource } from 'devextreme-react/scheduler';
3+
import SpeedDialAction from 'devextreme-react/speed-dial-action';
4+
import { data, priorities } from './data.js';
5+
6+
const views = ['week', 'month'];
7+
const cellDuration = 30;
8+
const currentDate = new Date(2021, 2, 25);
9+
const App = () => {
10+
const schedulerRef = useRef(null);
11+
const showAppointmentPopup = useCallback(() => {
12+
schedulerRef.current?.instance().showAppointmentPopup();
13+
}, []);
14+
return (
15+
<>
16+
<Scheduler
17+
ref={schedulerRef}
18+
timeZone="America/Los_Angeles"
19+
dataSource={data}
20+
views={views}
21+
adaptivityEnabled={true}
22+
defaultCurrentView="month"
23+
defaultCurrentDate={currentDate}
24+
cellDuration={cellDuration}
25+
height={590}
26+
startDayHour={9}
27+
>
28+
<Resource
29+
dataSource={priorities}
30+
fieldExpr="priorityId"
31+
label="Priority"
32+
icon="tags"
33+
/>
34+
</Scheduler>
35+
<SpeedDialAction
36+
icon="plus"
37+
onClick={showAppointmentPopup}
38+
/>
39+
</>
40+
);
41+
};
42+
export default App;

‎apps/demos/Demos/Scheduler/Adaptability/ReactJs/data.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
export const data = [
2+
{
3+
text: 'Website Re-Design Plan',
4+
startDate: new Date('2021-03-01T16:30:00.000Z'),
5+
endDate: new Date('2021-03-01T18:30:00.000Z'),
6+
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,FR;WKST=TU;INTERVAL=2;COUNT=32',
7+
},
8+
{
9+
text: 'Book Flights to San Fran for Sales Trip',
10+
startDate: new Date('2021-03-01T16:30:00.000Z'),
11+
endDate: new Date('2021-03-01T18:30:00.000Z'),
12+
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,FR;INTERVAL=4;COUNT=32',
13+
allDay: true,
14+
priorityId: [1],
15+
},
16+
{
17+
text: 'Install New Router in Dev Room',
18+
startDate: new Date('2021-03-01T16:30:00.000Z'),
19+
endDate: new Date('2021-03-01T18:30:00.000Z'),
20+
recurrenceRule: 'FREQ=WEEKLY;BYDAY=FR;INTERVAL=2;COUNT=32',
21+
},
22+
{
23+
text: 'Approve Personal Computer Upgrade Plan',
24+
startDate: new Date('2021-02-10T17:00:00.000Z'),
25+
endDate: new Date('2021-02-10T18:00:00.000Z'),
26+
recurrenceRule: 'FREQ=WEEKLY;BYDAY=WE;INTERVAL=2;COUNT=32',
27+
priorityId: [2],
28+
},
29+
{
30+
text: 'Final Budget Review',
31+
startDate: new Date('2021-04-01T19:00:00.000Z'),
32+
endDate: new Date('2021-04-01T20:35:00.000Z'),
33+
},
34+
{
35+
text: 'New Brochures',
36+
startDate: new Date('2021-04-01T21:30:00.000Z'),
37+
endDate: new Date('2021-04-01T22:45:00.000Z'),
38+
},
39+
{
40+
text: 'Install New Database',
41+
startDate: new Date('2021-04-01T16:45:00.000Z'),
42+
endDate: new Date('2021-04-01T18:15:00.000Z'),
43+
},
44+
{
45+
text: 'Approve New Online Marketing Strategy',
46+
startDate: new Date('2021-04-01T19:00:00.000Z'),
47+
endDate: new Date('2021-04-01T21:00:00.000Z'),
48+
},
49+
{
50+
text: 'Upgrade Personal Computers',
51+
startDate: new Date('2021-04-01T22:15:00.000Z'),
52+
endDate: new Date('2021-04-01T23:30:00.000Z'),
53+
},
54+
{
55+
text: 'Upgrade Personal Computers',
56+
startDate: new Date('2021-04-02T22:15:00.000Z'),
57+
endDate: new Date('2021-04-02T23:30:00.000Z'),
58+
},
59+
];
60+
export const priorities = [
61+
{
62+
text: 'High priority',
63+
id: 1,
64+
color: '#cc5c53',
65+
},
66+
{
67+
text: 'Low priority',
68+
id: 2,
69+
color: '#ff9747',
70+
},
71+
];

‎apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta
6+
http-equiv="X-UA-Compatible"
7+
content="IE=edge"
8+
/>
9+
<meta
10+
http-equiv="Content-Type"
11+
content="text/html; charset=utf-8"
12+
/>
13+
<meta
14+
name="viewport"
15+
content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
16+
/>
17+
<link
18+
rel="stylesheet"
19+
type="text/css"
20+
href="../../../../node_modules/devextreme-dist/css/dx.light.css"
21+
/>
22+
<link
23+
rel="stylesheet"
24+
type="text/css"
25+
href="styles.css"
26+
/>
27+
28+
<script src="../../../../node_modules/core-js/client/shim.min.js"></script>
29+
<script src="../../../../node_modules/systemjs/dist/system.js"></script>
30+
<script
31+
type="text/javascript"
32+
src="config.js"
33+
></script>
34+
<script type="text/javascript">
35+
System.import("./index.js");
36+
</script>
37+
</head>
38+
39+
<body class="dx-viewport">
40+
<div class="demo-container">
41+
<div id="app"></div>
42+
</div>
43+
</body>
44+
</html>

‎apps/demos/Demos/Scheduler/Adaptability/ReactJs/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App.js';
4+
5+
ReactDOM.render(<App />, document.getElementById('app'));

‎apps/demos/Demos/Scheduler/Adaptability/ReactJs/styles.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@media only screen and (max-width: 370px) {
2+
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container {
3+
height: auto;
4+
}
5+
6+
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center {
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button {
12+
padding: 0;
13+
}
14+
15+
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button .dx-button {
16+
width: 200px;
17+
}
18+
19+
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button:nth-child(1) {
20+
margin-bottom: 12px;
21+
}
22+
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import Scheduler, { Resource } from 'devextreme-react/scheduler';
3+
import ArrayStore from 'devextreme/data/array_store';
4+
import { assignees, data, priorities } from './data.js';
5+
6+
const currentDate = new Date(2021, 4, 11);
7+
const views = ['agenda'];
8+
const store = new ArrayStore({
9+
key: 'id',
10+
data,
11+
});
12+
const App = () => (
13+
<Scheduler
14+
timeZone="America/Los_Angeles"
15+
dataSource={store}
16+
views={views}
17+
currentView="agenda"
18+
defaultCurrentDate={currentDate}
19+
height={600}
20+
startDayHour={9}
21+
>
22+
<Resource
23+
dataSource={assignees}
24+
allowMultiple={true}
25+
fieldExpr="assigneeId"
26+
label="Assignee"
27+
useColorAsDefault={true}
28+
icon="user"
29+
/>
30+
<Resource
31+
dataSource={priorities}
32+
fieldExpr="priorityId"
33+
label="Priority"
34+
icon="tags"
35+
/>
36+
</Scheduler>
37+
);
38+
export default App;

0 commit comments

Comments
 (0)