Overview

DevExtreme React 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. Advanced UI customization is carried out using template components and render props. Declared PropTypes for typechecking are also included. 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.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

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']; class App extends React.Component { render() { return ( <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 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/23.1.5/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.js"); </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; 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"); } .dx-theme-material .name h2 { font-size: 28px; }

import React from 'react'; function isWeekEnd(date) { const day = date.getDay(); return day === 0 || day === 6; } function getCurrentTraining(date, employeeID) { const result = (date + employeeID) % 3; const currentTraining = `training-background-${result}`; return currentTraining; } class DataCell extends React.PureComponent { render() { const { data: { startDate, groups: { employeeID }, text } } = this.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'; class ResourceCell extends React.PureComponent { render() { const { data: { color, text, data: { avatar, age, discipline } } } = this.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;

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', }]; 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'), }, ];