Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Recurring Appointments
Documentation
This example demonstrates how to define recurring appointments. You can specify the appointment repetition interval programmatically or in the UI. In the former case, the appointment object should contain the recurrenceRule field. In the latter case, toggle the Repeat switcher on the appointment details form to mark the appointment as recurring and specify the required fields.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import Scheduler, { Resource } from 'devextreme-react/scheduler';
import { data, resourcesData } from './data.js';
const currentDate = new Date(2021, 2, 25);
const views = ['day', 'week', 'month'];
class App extends React.Component {
render() {
return (
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
views={views}
defaultCurrentView="month"
defaultCurrentDate={currentDate}
firstDayOfWeek={1}
startDayHour={9}
height={600}
>
<Resource
dataSource={resourcesData}
fieldExpr="roomId"
label="Room"
/>
</Scheduler>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app')
);
<!DOCTYPE html>
<html>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
export const data = [
{
text: 'Watercolor Landscape',
roomId: [1],
startDate: new Date('2021-03-01T17:30:00.000Z'),
endDate: new Date('2021-03-01T19:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=TU,FR;COUNT=10'
}, {
text: 'Oil Painting for Beginners',
roomId: [2],
startDate: new Date('2021-03-01T17:30:00.000Z'),
endDate: new Date('2021-03-01T19:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10'
}, {
text: 'Testing',
roomId: [3],
startDate: new Date('2021-03-01T20:00:00.000Z'),
endDate: new Date('2021-03-01T21:00:00.000Z'),
recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO;WKST=TU;INTERVAL=2;COUNT=2'
}, {
text: 'Meeting of Instructors',
roomId: [4],
startDate: new Date('2021-03-01T17:00:00.000Z'),
endDate: new Date('2021-03-01T17:15:00.000Z'),
recurrenceRule: 'FREQ=DAILY;BYDAY=WE;UNTIL=20210401'
}, {
text: 'Recruiting students',
roomId: [5],
startDate: new Date('2021-02-24T18:00:00.000Z'),
endDate: new Date('2021-02-24T19:00:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=14',
recurrenceException: '20210411T170000Z'
}, {
text: 'Final exams',
roomId: [3],
startDate: new Date('2021-02-24T20:00:00.000Z'),
endDate: new Date('2021-02-24T21:35:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYWEEKNO=24;BYDAY=TH,FR'
}, {
text: 'Monthly Planning',
roomId: [4],
startDate: new Date('2021-03-24T22:30:00.000Z'),
endDate: new Date('2021-03-24T23:45:00.000Z'),
recurrenceRule: 'FREQ=MONTHLY;BYMONTHDAY=28;COUNT=1'
}, {
text: 'Open Day',
roomId: [5],
startDate: new Date('2021-03-01T17:30:00.000Z'),
endDate: new Date('2021-03-01T21:00:00.000Z'),
recurrenceRule: 'FREQ=YEARLY;BYYEARDAY=87'
}
];
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'
}
];
System.config({
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16.14.0/umd/react.development.js',
'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.7.2/prop-types.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.5',
'devextreme-react': 'npm:devextreme-react@20.2.5',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.11/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.18/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.11/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js',
// 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'
},
packages: {
'devextreme': {
defaultExtension: 'js'
},
'devextreme-react': {
main: 'index.js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});