DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Scheduler - Overview

DevExtreme Scheduler is a UI component for scheduling. It implements all the features necessary for its purpose: flexible data binding, easy appointment editing, multiple calendar views, time zones support, and more. Learn more about DevExtreme React components.

To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: Getting Started with Scheduler.

Backend API
import React from 'react'; import Scheduler, { Resource, SchedulerTypes } from 'devextreme-react/scheduler'; import { employees, data } from './data.ts'; import DataCell from './DataCell.tsx'; import ResourceCell from './ResourceCell.tsx'; const currentDate = new Date(2021, 5, 2, 11, 30); const groups = ['employeeID']; const views: SchedulerTypes.ViewType[] = ['month']; const App = () => ( <Scheduler timeZone="America/Los_Angeles" dataSource={data} dataCellComponent={DataCell} resourceCellComponent={ResourceCell} groups={groups} views={views} defaultCurrentView="month" defaultCurrentDate={currentDate} height={600} showAllDayPanel={true} firstDayOfWeek={1} startDayHour={8} endDayHour={18} > <Resource label="Employee" fieldExpr="employeeID" dataSource={employees} allowMultiple={false} /> </Scheduler> ); export default App;
import React from 'react'; import Scheduler, { Resource } from 'devextreme-react/scheduler'; import { employees, data } from './data.js'; import DataCell from './DataCell.js'; import ResourceCell from './ResourceCell.js'; const currentDate = new Date(2021, 5, 2, 11, 30); const groups = ['employeeID']; const views = ['month']; const App = () => ( <Scheduler timeZone="America/Los_Angeles" dataSource={data} dataCellComponent={DataCell} resourceCellComponent={ResourceCell} groups={groups} views={views} defaultCurrentView="month" defaultCurrentDate={currentDate} height={600} showAllDayPanel={true} firstDayOfWeek={1} startDayHour={8} endDayHour={18} > <Resource label="Employee" fieldExpr="employeeID" dataSource={employees} allowMultiple={false} /> </Scheduler> ); export default App;
import React from 'react'; type DataCellProps = { data: { startDate: Date; groups: { employeeID: number; }; text: string; } }; const isWeekEnd = (date: Date) => { const day = date.getDay(); return day === 0 || day === 6; }; const getCurrentTraining = (date: number, employeeID: number) => { const result = (date + employeeID) % 3; const currentTraining = `training-background-${result}`; return currentTraining; }; const DataCell = (props: DataCellProps) => { const { data: { startDate, groups: { employeeID }, text } } = props; const dayClasses = [ 'day-cell', getCurrentTraining(startDate.getDate(), employeeID), ]; const employeeClasses = [`employee-${employeeID}`, 'dx-template-wrapper']; if (isWeekEnd(startDate)) { employeeClasses.push(`employee-weekend-${employeeID}`); } return ( <div className={employeeClasses.join(' ')}> <div className={dayClasses.join(' ')}> {text} </div> </div> ); }; export default DataCell;
import React from 'react'; type ResourceCellProps = { data: { color: string; text: string; data: { avatar: string; age: number; discipline: string; }; }; }; const ResourceCell = (props: ResourceCellProps) => { const { data: { color, text, data: { avatar, age, discipline } } } = props; return ( <div className="dx-template-wrapper"> <div className="name" style={{ background: color }}> <h2>{text}</h2> </div> <div className="avatar"> <img src={avatar} /> </div> <div className="info" style={{ color }}> Age: {age} <br /> <b>{discipline}</b> </div> </div> ); }; export default ResourceCell;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
import { SchedulerTypes } from 'devextreme-react/scheduler'; type Appointment = SchedulerTypes.Appointment & { employeeID: number }; type Resource = { text: string; id: number; color: string; avatar: string; age: number; discipline: string; }; export const data: Appointment[] = [ { text: 'Helen', employeeID: 2, startDate: new Date('2021-06-01T16:30:00.000Z'), endDate: new Date('2021-06-01T18:30:00.000Z'), }, { text: 'Helen', employeeID: 2, startDate: new Date('2021-06-10T16:30:00.000Z'), endDate: new Date('2021-06-11T18:30:00.000Z'), }, { text: 'Alex', employeeID: 1, startDate: new Date('2021-06-02T16:30:00.000Z'), endDate: new Date('2021-06-02T18:30:00.000Z'), }, { text: 'Alex', employeeID: 1, startDate: new Date('2021-06-11T19:00:00.000Z'), endDate: new Date('2021-06-11T20:00:00.000Z'), }, { text: 'Alex', employeeID: 2, startDate: new Date('2021-06-16T16:30:00.000Z'), endDate: new Date('2021-06-16T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-07T16:30:00.000Z'), endDate: new Date('2021-06-07T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-28T16:30:00.000Z'), endDate: new Date('2021-06-28T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-30T16:30:00.000Z'), endDate: new Date('2021-06-30T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 2, startDate: new Date('2021-06-04T16:30:00.000Z'), endDate: new Date('2021-06-04T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 2, startDate: new Date('2021-06-07T16:30:00.000Z'), endDate: new Date('2021-06-07T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 1, startDate: new Date('2021-06-21T16:30:00.000Z'), endDate: new Date('2021-06-21T18:30:00.000Z'), }, { text: 'Kelly', employeeID: 2, startDate: new Date('2021-06-15T16:30:00.000Z'), endDate: new Date('2021-06-15T18:30:00.000Z'), }, { text: 'Kelly', employeeID: 2, startDate: new Date('2021-06-29T16:30:00.000Z'), endDate: new Date('2021-06-29T18:30:00.000Z'), }]; export const employees: Resource[] = [{ text: 'John Heart', id: 1, color: '#56ca85', avatar: '../../../../images/gym/coach-man.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Sandra Johnson', id: 2, color: '#ff9747', avatar: '../../../../images/gym/coach-woman.png', age: 25, discipline: 'ABS, Fitball, StepFit', }];
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, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.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@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', '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@7.4.11/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.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; const isWeekEnd = (date) => { const day = date.getDay(); return day === 0 || day === 6; }; const getCurrentTraining = (date, employeeID) => { const result = (date + employeeID) % 3; const currentTraining = `training-background-${result}`; return currentTraining; }; const DataCell = (props) => { const { data: { startDate, groups: { employeeID }, text, }, } = props; const dayClasses = ['day-cell', getCurrentTraining(startDate.getDate(), employeeID)]; const employeeClasses = [`employee-${employeeID}`, 'dx-template-wrapper']; if (isWeekEnd(startDate)) { employeeClasses.push(`employee-weekend-${employeeID}`); } return ( <div className={employeeClasses.join(' ')}> <div className={dayClasses.join(' ')}>{text}</div> </div> ); }; export default DataCell;
import React from 'react'; const ResourceCell = (props) => { const { data: { color, text, data: { avatar, age, discipline }, }, } = props; return ( <div className="dx-template-wrapper"> <div className="name" style={{ background: color }} > <h2>{text}</h2> </div> <div className="avatar"> <img src={avatar} /> </div> <div className="info" style={{ color }} > Age: {age} <br /> <b>{discipline}</b> </div> </div> ); }; export default ResourceCell;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const data = [ { text: 'Helen', employeeID: 2, startDate: new Date('2021-06-01T16:30:00.000Z'), endDate: new Date('2021-06-01T18:30:00.000Z'), }, { text: 'Helen', employeeID: 2, startDate: new Date('2021-06-10T16:30:00.000Z'), endDate: new Date('2021-06-11T18:30:00.000Z'), }, { text: 'Alex', employeeID: 1, startDate: new Date('2021-06-02T16:30:00.000Z'), endDate: new Date('2021-06-02T18:30:00.000Z'), }, { text: 'Alex', employeeID: 1, startDate: new Date('2021-06-11T19:00:00.000Z'), endDate: new Date('2021-06-11T20:00:00.000Z'), }, { text: 'Alex', employeeID: 2, startDate: new Date('2021-06-16T16:30:00.000Z'), endDate: new Date('2021-06-16T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-07T16:30:00.000Z'), endDate: new Date('2021-06-07T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-28T16:30:00.000Z'), endDate: new Date('2021-06-28T18:30:00.000Z'), }, { text: 'Stan', employeeID: 1, startDate: new Date('2021-06-30T16:30:00.000Z'), endDate: new Date('2021-06-30T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 2, startDate: new Date('2021-06-04T16:30:00.000Z'), endDate: new Date('2021-06-04T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 2, startDate: new Date('2021-06-07T16:30:00.000Z'), endDate: new Date('2021-06-07T18:30:00.000Z'), }, { text: 'Rachel', employeeID: 1, startDate: new Date('2021-06-21T16:30:00.000Z'), endDate: new Date('2021-06-21T18:30:00.000Z'), }, { text: 'Kelly', employeeID: 2, startDate: new Date('2021-06-15T16:30:00.000Z'), endDate: new Date('2021-06-15T18:30:00.000Z'), }, { text: 'Kelly', employeeID: 2, startDate: new Date('2021-06-29T16:30:00.000Z'), endDate: new Date('2021-06-29T18:30:00.000Z'), }, ]; export const employees = [ { text: 'John Heart', id: 1, color: '#56ca85', avatar: '../../../../images/gym/coach-man.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { text: 'Sandra Johnson', id: 2, color: '#ff9747', avatar: '../../../../images/gym/coach-woman.png', age: 25, discipline: 'ABS, Fitball, StepFit', }, ];
<!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/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell { opacity: 1; color: rgba(0, 0, 0, 0.3); } .dx-template-wrapper, .dx-scheduler-date-table-cell { position: relative; } .dx-scheduler-date-table-cell .dx-template-wrapper { position: absolute; height: 100%; width: 100%; padding-right: 6px; } .avatar { width: 155px; float: left; overflow: hidden; position: relative; height: 125px; } .name { position: absolute; bottom: 0; left: 0; width: 100%; } .name h2 { color: #fff; font-size: 28px; text-align: left; padding: 0 0 5px 175px; margin: 0; } .info { width: auto; text-align: left; height: 100%; font-size: 11pt; font-weight: normal; padding: 25px 20px; color: #707070; } .dx-color-scheme-contrast .info { color: #fff; } .day-cell { height: 100%; background-position: center center; background-repeat: no-repeat; } .employee-1 { background-color: rgba(86, 202, 133, 0.1); } .employee-2 { background-color: rgba(255, 151, 71, 0.1); } .employee-weekend-1 { background-color: rgba(86, 202, 133, 0.2); } .employee-weekend-2 { background-color: rgba(255, 151, 71, 0.2); } .training-background-0 { background-image: url("../../../../images/gym/icon-abs.png"); } .training-background-1 { background-image: url("../../../../images/gym/icon-step.png"); } .training-background-2 { background-image: url("../../../../images/gym/icon-fitball.png"); }