This section briefly explains how to create React Scheduler component and configure its available functionalities in React environment, using Essential JS 2 quickstart seed repository.
To get start quickly with React Scheduler using the Create React App, you can check on this video:
The following list of dependencies are required to use the Scheduler component in your application.
|-- @syncfusion/ej2-react-schedule
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-schedule
|-- @syncfusion/ej2-compression
|-- @syncfusion/ej2-excel-export
|-- @syncfusion/ej2-file-utils
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-split-buttons
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-dropdowns
You can use create-react-app to setup the applications. To install create-react-app run the following command.
npm install -g create-react-app
To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
create-react-app quickstart
cd quickstart
All the available Essential JS 2 packages are published in npmjs.com
public registry. To install Scheduler component, use the following command.
npm install @syncfusion/ej2-react-schedule --save
Add scheduler component’s styles as given below in src/App.css
.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-schedule/styles/material.css";
To refer
App.css
in the application then import it in thesrc/App.tsx
file.
In case, if you want to make use of the combined CSS files of entire components, then you can avail it from the root folder of Essential JS 2 package and reference it with the code shown below.
@import '../../node_modules/@syncfusion/ej2/material.css';
Each view types available in scheduler are maintained as individual modules and to work with those views, it is necessary to inject the required modules. The following modules are available in scheduler namely,
Day
- Inject this module to work with the day view.Week
- Inject this module to work with the week view.WorkWeek
- Inject this module to work with the work week view.Month
- Inject this module to work with the month view.Agenda
- Inject this module to work with the agenda view.MonthAgenda
- Inject this module for displaying month agenda view.TimelineViews
- Inject this module to work with the timeline day, timeline week, timeline work week view.TimelineMonth
- Inject this module to work with the timeline month view.These modules should be injected into the schedule using the Inject
method within the app.tsx
file as shown below. On doing so, only the injected views will be loaded and displayed on the schedule.
[src/app/app.tsx]
<Inject services={[Day, Week, WorkWeek, Month, Agenda, MonthAgenda, TimelineViews, TimelineMonth ]} />
Add the HTML div tag defined with an id
attribute in your index.html
file, where the scheduler element is initialized.
[src/index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.1.55/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<!--Element where the scheduler will be rendered-->
<div id="schedule"></div>
</body>
</html>
Import the Scheduler component to your app.tsx
file as shown below,
and initialize it to the element defined with an id schedule
in the index.html
file.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
class App extends React.Component {
render() {
return <ScheduleComponent>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
class App extends React.Component<{}, {}>{
render() {
return <ScheduleComponent>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Now, run the application in the browser using the following command.
npm start
Above demo will display the empty scheduler.
dataSource
property either with valid JSON data or else with remote URL, from
where the data will be fetched.Here, the local JSON data is assigned to Scheduler’s dataSource.
[src/app/app.tsx]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent } from '@syncfusion/ej2-react-schedule';
class App extends React.Component<{}, {}>{
private data: object [] = [{
{
Id: 1,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
},
}],
render() {
return <ScheduleComponent height='550px' selectedDate= {new Date(2018, 1, 15)} eventSettings={ { dataSource: this.data } } >
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
You can also provide different names to these default fields, for which the custom names of those fields must be mapped appropriately within fields property as shown below.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [{
Id: 2,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
Status: 'Completed',
Priority: 'High'
}];
}
render() {
return <ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data,
fields: {
id: 'Id',
subject: { name: 'Subject' },
isAllDay: { name: 'IsAllDay' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' }
}
}}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
class App extends React.Component<{}, {}>{
private data: object [] = [{
Id: 2,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false,
Status: 'Completed',
Priority: 'High'
}];
render() {
return <ScheduleComponent height='550px' selectedDate= {new Date(2018, 1, 15)} eventSettings= { { dataSource: this.data,
fields: {
id: 'Id',
subject: { name: 'Subject' },
isAllDay: { name: 'IsAllDay' },
startTime: { name: 'StartTime' },
endTime: { name: 'EndTime' }
}
} }>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
The other fields available in Scheduler can be referred from here.
Scheduler usually displays the system date as its current date. To change the current date of Scheduler with specific date, define the selectedDate
property.
[src/app/app.tsx]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
class App extends React.Component {
render() {
return <ScheduleComponent height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data }}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { defaultData } from './datasource';
class App extends React.Component<{}, {}>{
render() {
return <ScheduleComponent height='550px' selectedDate= {new Date(2018, 1, 15)} eventSettings={ { dataSource: this.data } }>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Scheduler displays week
view by default. To change the current view, define the applicable view name to the currentView
property. The applicable view names are,
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, WorkWeek, Agenda, Month, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
class App extends React.Component<{}, {}> {
render() {
return <ScheduleComponent width='100%' height='550px' currentView='Month'
selectedDate={new Date(2017, 11, 15)}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Agenda, Month]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Each individual Scheduler views can be customized with its own options such as setting different start and end hour on Week and Work Week views, whereas hiding the weekend days on Month view alone. This can be achieved by defining views property to accept the array of object type, where each object depicts the individual view customization.
The output will display the Scheduler with the specified view configuration.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, WorkWeek, Week, Month, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { defaultData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], defaultData, null, true);
}
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data }}>
<ViewsDirective>
<ViewDirective option='WorkWeek' startHour='10:00' endHour='18:00'/>
<ViewDirective option='Week' startHour='07:00' endHour='15:00'/>
<ViewDirective option='Month' showWeekend={false}/>
</ViewsDirective>
<Inject services={[WorkWeek, Week, Month]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, WorkWeek, Week, Month, Inject,
ViewsDirective, ViewDirective} from '@syncfusion/ej2-react-schedule';
import { defaultData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}>{
private data: Object[] = extend([], defaultData, null, true) as Object[];
render() {
return <ScheduleComponent width= '100%' height='550px' selectedDate= {new Date(2018, 1, 15)} eventSettings= { { dataSource: this.data } } >
<ViewsDirective>
<ViewDirective option='WorkWeek' startHour= '10:00' endHour= '18:00' />
<ViewDirective option= 'Week' startHour= '07:00' endHour= '15:00' />
<ViewDirective option='Month' showWeekend={false} />
</ViewsDirective>
<Inject services={[WorkWeek, Week, Month]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
You can also explore our React Scheduler example that shows how to use the toolbar buttons to play with Scheduler functionalities.