If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import Scheduler, { Resource, SchedulerTypes } from 'devextreme-react/scheduler';
import { data, resourcesData } from './data.ts';
const currentDate = new Date(2020, 10, 25);
const views: SchedulerTypes.ViewType[] = ['day', 'week', 'month'];
const App = () => (
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
views={views}
defaultCurrentView="month"
defaultCurrentDate={currentDate}
startDayHour={9}
height={730}
>
<Resource
dataSource={resourcesData}
fieldExpr="roomId"
label="Room"
/>
</Scheduler>
);
export default App;
xxxxxxxxxx
import React from 'react';
import Scheduler, { Resource } from 'devextreme-react/scheduler';
import { data, resourcesData } from './data.js';
const currentDate = new Date(2020, 10, 25);
const views = ['day', 'week', 'month'];
const App = () => (
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
views={views}
defaultCurrentView="month"
defaultCurrentDate={currentDate}
startDayHour={9}
height={730}
>
<Resource
dataSource={resourcesData}
fieldExpr="roomId"
label="Room"
/>
</Scheduler>
);
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
import { SchedulerTypes } from 'devextreme-react/scheduler';
type Appointment = SchedulerTypes.Appointment & { roomId: number[] | number };
export const data: Appointment[] = [
{
text: 'Watercolor Landscape',
roomId: [1],
startDate: new Date('2020-11-01T17:30:00.000Z'),
endDate: new Date('2020-11-01T19:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10',
}, {
text: 'Oil Painting for Beginners',
roomId: [2],
startDate: new Date('2020-11-01T17:30:00.000Z'),
endDate: new Date('2020-11-01T19:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU,WE;COUNT=10',
}, {
text: 'Testing',
roomId: [3],
startDate: new Date('2020-11-01T20:00:00.000Z'),
endDate: new Date('2020-11-01T21:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;WKST=TU;INTERVAL=2;COUNT=2',
}, {
text: 'Meeting of Instructors',
roomId: [4],
startDate: new Date('2020-11-01T17:00:00.000Z'),
endDate: new Date('2020-11-01T17:15:00.000Z'),
recurrenceRule: 'FREQ=DAILY;BYDAY=TU;UNTIL=20201203',
}, {
text: 'Recruiting students',
roomId: [5],
startDate: new Date('2020-10-24T18:00:00.000Z'),
endDate: new Date('2020-10-24T19:00:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=50;WKST=SU',
recurrenceException: '20201212T190000Z',
}, {
text: 'Final exams',
roomId: [3],
startDate: new Date('2020-10-24T20:00:00.000Z'),
endDate: new Date('2020-10-24T21:35:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=51;BYDAY=WE,TH',
}, {
text: 'Monthly Planning',
roomId: [4],
startDate: new Date('2020-11-24T22:30:00.000Z'),
endDate: new Date('2020-11-24T23:45:00.000Z'),
recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1',
}, {
text: 'Open Day',
roomId: [5],
startDate: new Date('2020-11-01T17:30:00.000Z'),
endDate: new Date('2020-11-01T21:00:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYYEARDAY=333',
},
];
export const resourcesData = [
{
text: 'Room 101',
id: 1,
color: '#bbd806',
}, {
text: 'Room 102',
id: 2,
color: '#f34c8a',
}, {
text: 'Room 103',
id: 3,
color: '#ae7fcc',
}, {
text: 'Meeting room',
id: 4,
color: '#ff8817',
}, {
text: 'Conference hall',
id: 5,
color: '#03bb92',
},
];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@24.2.5/cjs',
'devextreme-react': 'npm:devextreme-react@24.2.5/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const data = [
{
text: 'Watercolor Landscape',
roomId: [1],
startDate: new Date('2020-11-01T17:30:00.000Z'),
endDate: new Date('2020-11-01T19:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10',
},
{
text: 'Oil Painting for Beginners',
roomId: [2],
startDate: new Date('2020-11-01T17:30:00.000Z'),
endDate: new Date('2020-11-01T19:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU,WE;COUNT=10',
},
{
text: 'Testing',
roomId: [3],
startDate: new Date('2020-11-01T20:00:00.000Z'),
endDate: new Date('2020-11-01T21:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=SU;WKST=TU;INTERVAL=2;COUNT=2',
},
{
text: 'Meeting of Instructors',
roomId: [4],
startDate: new Date('2020-11-01T17:00:00.000Z'),
endDate: new Date('2020-11-01T17:15:00.000Z'),
recurrenceRule: 'FREQ=DAILY;BYDAY=TU;UNTIL=20201203',
},
{
text: 'Recruiting students',
roomId: [5],
startDate: new Date('2020-10-24T18:00:00.000Z'),
endDate: new Date('2020-10-24T19:00:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=50;WKST=SU',
recurrenceException: '20201212T190000Z',
},
{
text: 'Final exams',
roomId: [3],
startDate: new Date('2020-10-24T20:00:00.000Z'),
endDate: new Date('2020-10-24T21:35:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=51;BYDAY=WE,TH',
},
{
text: 'Monthly Planning',
roomId: [4],
startDate: new Date('2020-11-24T22:30:00.000Z'),
endDate: new Date('2020-11-24T23:45:00.000Z'),
recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1',
},
{
text: 'Open Day',
roomId: [5],
startDate: new Date('2020-11-01T17:30:00.000Z'),
endDate: new Date('2020-11-01T21:00:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYYEARDAY=333',
},
];
export const resourcesData = [
{
text: 'Room 101',
id: 1,
color: '#bbd806',
},
{
text: 'Room 102',
id: 2,
color: '#f34c8a',
},
{
text: 'Room 103',
id: 3,
color: '#ae7fcc',
},
{
text: 'Meeting room',
id: 4,
color: '#ff8817',
},
{
text: 'Conference hall',
id: 5,
color: '#03bb92',
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
Do the following to create a recurring appointment:
-
Locate or create an appointment object in the dataSource.
-
Specify the recurrenceRule property to configure the appointment frequency. Set this property according to the iCalendar RFC 2445 specification. A single data object with recurrenceRule creates an appointment series.
-
Optionally, use the recurrenceException property to specify the start date and time of those appointments that you want to exclude from the series.
You can use custom fields that set recurrence. To enable them, specify their names in the Scheduler's recurrenceRuleExpr and recurrenceExceptionExpr properties.
Users can also create recurring appointments. The appointment details form contains a Repeat switch. When it is on, the form displays an additional set of fields to specify recurrence rules. Double-click an appointment and select Edit series to view the appointment details form with the recurrence fields. You can also select Edit appointment to view a single non-recurring appointment from the series.