Backend API
import React from 'react';
import Scheduler, {
Resource,
View,
Editing,
Form as SchedulerForm,
Item,
} from 'devextreme-react/scheduler';
import { data, priorityData, typeData } from './data.ts';
const currentDate = new Date(2021, 3, 27);
const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const typeGroups = ['typeId'];
const priorityGroups = ['priorityId'];
type DateCellProps = {
data: any;
};
const DateCell = ({ data: cellData }: DateCellProps) => (
<>
<div className="name">{dayOfWeekNames[cellData.date.getDay()]}</div>
<div className="number">{cellData.date.getDate()}</div>
</>
);
const App = () => (
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
defaultCurrentView="workWeek"
showAllDayPanel={false}
defaultCurrentDate={currentDate}
height={730}
startDayHour={7}
endDayHour={23}
>
<View type="day" />
<View type="week" groups={typeGroups} dateCellComponent={DateCell} />
<View
type="workWeek"
groups={priorityGroups}
startDayHour={9}
endDayHour={18}
dateCellComponent={DateCell}
/>
<View type="month" />
<Resource
dataSource={priorityData}
fieldExpr="priorityId"
label="Priority"
allowMultiple={false}
icon="tags"
/>
<Resource
dataSource={typeData}
fieldExpr="typeId"
label="Type"
allowMultiple={false}
/>
<Editing>
<SchedulerForm>
<Item name="mainGroup">
<Item name="subjectGroup" />
<Item name="dateGroup" />
<Item name="repeatGroup" />
<Item name="resourcesGroup">
<Item name="priorityIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
<Item name="priorityIdIcon" />
<Item name="priorityIdEditor" />
<Item name="typeIdEditor" />
</Item>
</Item>
<Item name="descriptionGroup" />
</Item>
<Item name="recurrenceGroup" />
</SchedulerForm>
</Editing>
</Scheduler>
);
export default App;
import React from 'react';
import Scheduler, {
Resource,
View,
Editing,
Form as SchedulerForm,
Item,
} from 'devextreme-react/scheduler';
import { data, priorityData, typeData } from './data.js';
const currentDate = new Date(2021, 3, 27);
const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const typeGroups = ['typeId'];
const priorityGroups = ['priorityId'];
const DateCell = ({ data: cellData }) => (
<>
<div className="name">{dayOfWeekNames[cellData.date.getDay()]}</div>
<div className="number">{cellData.date.getDate()}</div>
</>
);
const App = () => (
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
defaultCurrentView="workWeek"
showAllDayPanel={false}
defaultCurrentDate={currentDate}
height={730}
startDayHour={7}
endDayHour={23}
>
<View type="day" />
<View
type="week"
groups={typeGroups}
dateCellComponent={DateCell}
/>
<View
type="workWeek"
groups={priorityGroups}
startDayHour={9}
endDayHour={18}
dateCellComponent={DateCell}
/>
<View type="month" />
<Resource
dataSource={priorityData}
fieldExpr="priorityId"
label="Priority"
allowMultiple={false}
icon="tags"
/>
<Resource
dataSource={typeData}
fieldExpr="typeId"
label="Type"
allowMultiple={false}
/>
<Editing>
<SchedulerForm>
<Item name="mainGroup">
<Item name="subjectGroup" />
<Item name="dateGroup" />
<Item name="repeatGroup" />
<Item name="resourcesGroup">
<Item
name="priorityIdGroup"
colCount={3}
colCountByScreen={{ xs: 3 }}
>
<Item name="priorityIdIcon" />
<Item name="priorityIdEditor" />
<Item name="typeIdEditor" />
</Item>
</Item>
<Item name="descriptionGroup" />
</Item>
<Item name="recurrenceGroup" />
</SchedulerForm>
</Editing>
</Scheduler>
);
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { SchedulerTypes } from 'devextreme-react/scheduler';
type Appointment = SchedulerTypes.Appointment & { priorityId: number; typeId: number; };
type Resource = {
text: string;
id: number;
color: string;
};
export const data: Appointment[] = [{
text: 'Walking a dog',
priorityId: 1,
typeId: 1,
startDate: new Date('2021-04-26T15:00:00.000Z'),
endDate: new Date('2021-04-26T15:30:00.000Z'),
recurrenceRule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210502',
},
{
text: 'Website Re-Design Plan',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-26T16:00:00.000Z'),
endDate: new Date('2021-04-26T18:30:00.000Z'),
}, {
text: 'Book Flights to San Fran for Sales Trip',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-26T19:00:00.000Z'),
endDate: new Date('2021-04-26T20:00:00.000Z'),
}, {
text: 'Install New Router in Dev Room',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-26T21:30:00.000Z'),
endDate: new Date('2021-04-26T22:30:00.000Z'),
}, {
text: 'Go Grocery Shopping',
priorityId: 1,
typeId: 1,
startDate: new Date('2021-04-27T01:30:00.000Z'),
endDate: new Date('2021-04-27T02:30:00.000Z'),
recurrenceRule: 'FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210502',
}, {
text: 'Approve Personal Computer Upgrade Plan',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-27T17:00:00.000Z'),
endDate: new Date('2021-04-27T18:00:00.000Z'),
}, {
text: 'Final Budget Review',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-27T19:00:00.000Z'),
endDate: new Date('2021-04-27T20:35:00.000Z'),
}, {
text: 'New Brochures',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-27T21:30:00.000Z'),
endDate: new Date('2021-04-27T22:45:00.000Z'),
}, {
text: 'Install New Database',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-28T16:45:00.000Z'),
endDate: new Date('2021-04-28T18:15:00.000Z'),
}, {
text: 'Approve New Online Marketing Strategy',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-28T19:00:00.000Z'),
endDate: new Date('2021-04-28T21:00:00.000Z'),
}, {
text: 'Upgrade Personal Computers',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-28T22:15:00.000Z'),
endDate: new Date('2021-04-28T23:30:00.000Z'),
}, {
text: 'Prepare 2021 Marketing Plan',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-29T18:00:00.000Z'),
endDate: new Date('2021-04-29T20:30:00.000Z'),
}, {
text: 'Brochure Design Review',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-29T21:00:00.000Z'),
endDate: new Date('2021-04-29T22:30:00.000Z'),
}, {
text: 'Create Icons for Website',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-30T17:00:00.000Z'),
endDate: new Date('2021-04-30T18:30:00.000Z'),
}, {
text: 'Upgrade Server Hardware',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-30T21:30:00.000Z'),
endDate: new Date('2021-04-30T23:00:00.000Z'),
}, {
text: 'Submit New Website Design',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-30T23:30:00.000Z'),
endDate: new Date('2021-05-01T01:00:00.000Z'),
}, {
text: 'Launch New Website',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-30T19:20:00.000Z'),
endDate: new Date('2021-04-30T21:00:00.000Z'),
}, {
text: 'Visiting a Doctor',
priorityId: 2,
typeId: 1,
startDate: new Date('2021-05-01T17:00:00.000Z'),
endDate: new Date('2021-05-01T20:30:00.000Z'),
}];
export const priorityData: Resource[] = [{
text: 'Low Priority',
id: 1,
color: '#fcb65e',
}, {
text: 'High Priority',
id: 2,
color: '#e18e92',
}];
export const typeData: Resource[] = [{
text: 'Home',
id: 1,
color: '#b6d623',
}, {
text: 'Work',
id: 2,
color: '#679ec5',
}];
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const data = [
{
text: 'Walking a dog',
priorityId: 1,
typeId: 1,
startDate: new Date('2021-04-26T15:00:00.000Z'),
endDate: new Date('2021-04-26T15:30:00.000Z'),
recurrenceRule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210502',
},
{
text: 'Website Re-Design Plan',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-26T16:00:00.000Z'),
endDate: new Date('2021-04-26T18:30:00.000Z'),
},
{
text: 'Book Flights to San Fran for Sales Trip',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-26T19:00:00.000Z'),
endDate: new Date('2021-04-26T20:00:00.000Z'),
},
{
text: 'Install New Router in Dev Room',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-26T21:30:00.000Z'),
endDate: new Date('2021-04-26T22:30:00.000Z'),
},
{
text: 'Go Grocery Shopping',
priorityId: 1,
typeId: 1,
startDate: new Date('2021-04-27T01:30:00.000Z'),
endDate: new Date('2021-04-27T02:30:00.000Z'),
recurrenceRule: 'FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210502',
},
{
text: 'Approve Personal Computer Upgrade Plan',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-27T17:00:00.000Z'),
endDate: new Date('2021-04-27T18:00:00.000Z'),
},
{
text: 'Final Budget Review',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-27T19:00:00.000Z'),
endDate: new Date('2021-04-27T20:35:00.000Z'),
},
{
text: 'New Brochures',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-27T21:30:00.000Z'),
endDate: new Date('2021-04-27T22:45:00.000Z'),
},
{
text: 'Install New Database',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-28T16:45:00.000Z'),
endDate: new Date('2021-04-28T18:15:00.000Z'),
},
{
text: 'Approve New Online Marketing Strategy',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-28T19:00:00.000Z'),
endDate: new Date('2021-04-28T21:00:00.000Z'),
},
{
text: 'Upgrade Personal Computers',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-28T22:15:00.000Z'),
endDate: new Date('2021-04-28T23:30:00.000Z'),
},
{
text: 'Prepare 2021 Marketing Plan',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-29T18:00:00.000Z'),
endDate: new Date('2021-04-29T20:30:00.000Z'),
},
{
text: 'Brochure Design Review',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-29T21:00:00.000Z'),
endDate: new Date('2021-04-29T22:30:00.000Z'),
},
{
text: 'Create Icons for Website',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-30T17:00:00.000Z'),
endDate: new Date('2021-04-30T18:30:00.000Z'),
},
{
text: 'Upgrade Server Hardware',
priorityId: 1,
typeId: 2,
startDate: new Date('2021-04-30T21:30:00.000Z'),
endDate: new Date('2021-04-30T23:00:00.000Z'),
},
{
text: 'Submit New Website Design',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-30T23:30:00.000Z'),
endDate: new Date('2021-05-01T01:00:00.000Z'),
},
{
text: 'Launch New Website',
priorityId: 2,
typeId: 2,
startDate: new Date('2021-04-30T19:20:00.000Z'),
endDate: new Date('2021-04-30T21:00:00.000Z'),
},
{
text: 'Visiting a Doctor',
priorityId: 2,
typeId: 1,
startDate: new Date('2021-05-01T17:00:00.000Z'),
endDate: new Date('2021-05-01T20:30:00.000Z'),
},
];
export const priorityData = [
{
text: 'Low Priority',
id: 1,
color: '#fcb65e',
},
{
text: 'High Priority',
id: 2,
color: '#e18e92',
},
];
export const typeData = [
{
text: 'Home',
id: 1,
color: '#b6d623',
},
{
text: 'Work',
id: 2,
color: '#679ec5',
},
];
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
.dx-scheduler-work-space-week .dx-scheduler-header-panel-cell,
.dx-scheduler-work-space-work-week .dx-scheduler-header-panel-cell {
text-align: center;
vertical-align: middle;
}
.dx-scheduler-work-space .dx-scheduler-header-panel-cell .name {
font-size: 13px;
line-height: 15px;
}
.dx-scheduler-work-space .dx-scheduler-header-panel-cell .number {
font-size: 15px;
line-height: 15px;
}