Editor template in React Schedule component
25 Jul 202424 minutes to read
Scheduler makes use of popups and dialog to display the required notifications, as well as includes an editor window with event fields for making the appointment creation and editing process easier. You can also easily customize the editor window and the fields present in it, and can also apply validations on those fields.
Event editor
The editor window usually opens on the Scheduler, when a cell or event is double clicked. When a cell is double clicked, the detailed editor window opens in “Add new” mode, whereas when an event is double clicked, the same is opened in an “Edit” mode.
In mobile devices, you can open the detailed editor window in edit mode by clicking the edit icon on the popup, that opens on single tapping an event. You can also open it in add mode by single tapping a cell, which will display a + indication, clicking on it again will open the editor window.
You can also prevent the editor window from opening, by rendering Scheduler in a
readonlymode or by doing code customization within thepopupOpenevent.
How to change the editor window header title and text of footer buttons
You can change the header title and the text of buttons displayed at the footer of the editor window by changing the appropriate localized word collection used in the Scheduler.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, TimelineViews, Month, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { L10n } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource';
L10n.load({
'en-US': {
'schedule': {
'saveButton': 'Add',
'cancelButton': 'Close',
'deleteButton': 'Remove',
'newEvent': 'Add Event',
},
}
});
const App = () => {
const eventSettings = { dataSource: scheduleData };
return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='TimelineWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, TimelineViews, Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, TimelineViews, Month, ViewsDirective, ViewDirective, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { L10n } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource';
L10n.load({
'en-US': {
'schedule': {
'saveButton': 'Add',
'cancelButton': 'Close',
'deleteButton': 'Remove',
'newEvent': 'Add Event',
},
}
});
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='TimelineWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, TimelineViews, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to change the label text of default editor fields
To change the default labels such as Subject, Location and other field names in the editor window, make use of the title property available within the field option of eventSettings.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, TimelineViews, Month, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const fieldsData = {
id: 'Id',
subject: { name: 'Subject', title: 'Event Name' },
location: { name: 'Location', title: 'Event Location' },
description: { name: 'Description', title: 'Event Description' },
startTime: { name: 'StartTime', title: 'Start Duration' },
endTime: { name: 'EndTime', title: 'End Duration' }
}
const eventSettings = { dataSource: scheduleData, fields: fieldsData };
return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='TimelineDay' />
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, TimelineViews, Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, TimelineViews, Month, ViewsDirective, ViewDirective, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const fieldsData = {
id: 'Id',
subject: { name: 'Subject', title: 'Event Name' },
location: { name: 'Location', title: 'Event Location' },
description: { name: 'Description', title: 'Event Description' },
startTime: { name: 'StartTime', title: 'Start Duration' },
endTime: { name: 'EndTime', title: 'End Duration' }
}
const eventSettings: EventSettingsModel = { dataSource: scheduleData, fields: fieldsData };
return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='TimelineDay' />
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, TimelineViews, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Field validation
It is possible to validate the required fields of the editor window from client-side before submitting it, by adding appropriate validation rules to each field. The appointment fields have been extended to accept both string and object type values. To perform validations, it is necessary to specify object values for the event fields.
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 { scheduleData } from './datasource';
const App = () => {
const minValidation = (args) => {
return args['value'].length >= 5;
};
const fieldsData = {
id: 'Id',
subject: { name: 'Subject', validation: { required: true } },
location: { name: 'Location', validation: { required: true } },
description: {
name: 'Description', validation: {
required: true, minLength: [minValidation, 'Need atleast 5 letters to be entered']
}
},
startTime: { name: 'StartTime', validation: { required: true } },
endTime: { name: 'EndTime', validation: { required: true } }
}
const eventSettings = { dataSource: scheduleData, fields: fieldsData };
return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const minValidation: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
return args['value'].length >= 5;
};
const fieldsData = {
id: 'Id',
subject: { name: 'Subject', validation: { required: true } },
location: { name: 'Location', validation: { required: true } },
description: {
name: 'Description', validation: {
required: true, minLength: [minValidation, 'Need atleast 5 letters to be entered']
}
},
startTime: { name: 'StartTime', validation: { required: true } },
endTime: { name: 'EndTime', validation: { required: true } }
}
const eventSettings: EventSettingsModel = { dataSource: scheduleData, fields: fieldsData };
return (<ScheduleComponent width='100%' height='500px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Applicable validation rules can be referred from form validation documentation.
Add additional fields to the default editor
The additional fields can be added to the default event editor by making use of the popupOpen event which gets triggered before the event editor opens on the Scheduler. The popupOpen is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name e-field, so as to handle and process those additional data along with the default event object. In the following example, an additional field Event Type has been added to the default event editor and its value is processed accordingly.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { createElement } from '@syncfusion/ej2-base';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
if (args.type === 'Editor') {
if (!args.element.querySelector('.custom-field-row')) {
let row = createElement('div', { className: 'custom-field-row' });
let formElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);
let container = createElement('div', { className: 'custom-field-container' });
let inputEle = createElement('input', {
className: 'e-field', attrs: { name: 'EventType' }
});
container.appendChild(inputEle);
row.appendChild(container);
let drowDownList = new DropDownList({
dataSource: [
{ text: 'Public Event', value: 'public-event' },
{ text: 'Maintenance', value: 'maintenance' },
{ text: 'Commercial Event', value: 'commercial-event' },
{ text: 'Family Event', value: 'family-event' }
],
fields: { text: 'text', value: 'value' },
value: args.data.EventType,
floatLabelType: 'Always', placeholder: 'Event Type'
});
drowDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'EventType');
}
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} popupOpen={onPopupOpen}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, PopupOpenEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { createElement } from '@syncfusion/ej2-base';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'Editor') {
if (!args.element.querySelector('.custom-field-row')) {
let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
let formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);
let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
let inputEle: HTMLInputElement = createElement('input', {
className: 'e-field', attrs: { name: 'EventType' }
}) as HTMLInputElement;
container.appendChild(inputEle);
row.appendChild(container);
let drowDownList: DropDownList = new DropDownList({
dataSource: [
{ text: 'Public Event', value: 'public-event' },
{ text: 'Maintenance', value: 'maintenance' },
{ text: 'Commercial Event', value: 'commercial-event' },
{ text: 'Family Event', value: 'family-event' }
],
fields: { text: 'text', value: 'value' },
value: (args.data as { [key: string]: Object }).EventType as string,
floatLabelType: 'Always', placeholder: 'Event Type'
});
drowDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'EventType');
}
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings} popupOpen={onPopupOpen} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customizing the default time duration in editor window
In default event editor window, start and end time duration are processed based on the interval value set within the timeScale property. By default, interval value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the duration option within the popupOpen event as shown in the following code example.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
if (args.type === 'Editor') {
args.duration = 60;
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} popupOpen={onPopupOpen}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>);
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, PopupOpenEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'Editor') {
args.duration = 60;
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings} popupOpen={onPopupOpen} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to prevent the display of editor and quick popups
It is possible to prevent the display of editor and quick popup windows by passing the value true to cancel option within the popupOpen event.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
args.cancel = true;
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} popupOpen={onPopupOpen}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, PopupOpenEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
args.cancel = true;
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings} popupOpen={onPopupOpen} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the popupOpen event are as follows.
| Type | Description |
|---|---|
| Editor | For Detailed editor window. |
| QuickInfo | For Quick popup which opens on cell click. |
| EditEventInfo | For Quick popup which opens on event click. |
| ViewEventInfo | For Quick popup which opens on responsive mode. |
| EventContainer | For more event indicator popup. |
| RecurrenceAlert | For edit recurrence event alert popup. |
| DeleteAlert | For delete confirmation popup. |
| ValidationAlert | For validation alert popup. |
| RecurrenceValidationAlert | For recurrence validation alert popup. |
Customizing timezone collection in the editor window
By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the timezoneDataSource property with the collection of TimezoneFields data.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
const App = () => {
const data = [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2020, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false
}, {
Id: 2,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2020, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 0),
IsAllDay: false
}];
const eventSettings = { dataSource: data };
return (<ScheduleComponent height='550px' selectedDate={new Date(2020, 1, 15)} eventSettings={eventSettings} timezoneDataSource={[
{ Value: 'Pacific/Niue', Text: 'Niue' },
{ Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
{ Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
{ Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
{ Value: 'Pacific/Tahiti', Text: 'Tahiti' },
]}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
const App = () => {
const data: object[] = [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2020, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false
}, {
Id: 2,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2020, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 0),
IsAllDay: false
}];
const eventSettings: EventSettingsModel = { dataSource: data };
return (<ScheduleComponent height='550px'
selectedDate={new Date(2020, 1, 15)}
eventSettings={eventSettings}
timezoneDataSource={[
{ Value: 'Pacific/Niue', Text: 'Niue' },
{ Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
{ Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
{ Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
{ Value: 'Pacific/Tahiti', Text: 'Tahiti' },
]}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customizing event editor using template
The event editor window can be customized by making use of the editorTemplate option. Here, the custom window design is built with the required fields using the script template and its type should be of text/x-template.
Each field defined within template should contain the e-field class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the editorTemplate option, so that these customized fields will be replaced onto the default editor window.
Note: e-field class only applicable for DropDownList, DateTimePicker, MultiSelect, DatePicker, CheckBox and TextBox components. Since we have processed the field values internally for the above mentioned components.
As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as DropDownList and DateTimePicker within the popupOpen event. This particular step can be skipped, if the user needs to simply use the usual form elements.
Learn how to customize the event editor window using templates from this video:
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
if (args.type === 'Editor') {
let statusElement = args.element.querySelector('#EventType');
if (statusElement) {
statusElement.setAttribute('name', 'EventType');
}
}
}
const editorTemplate = (props) => {
return (props !== undefined ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Status</td><td colSpan={4}>
<DropDownListComponent id="EventType" placeholder='Choose status' data-name="EventType" className="e-field" style= dataSource={['New', 'Requested', 'Confirmed']} value={props.EventType || null}></DropDownListComponent>
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style=></textarea>
</td></tr></tbody></table> : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} editorTemplate={editorTemplate.bind(this)} showQuickInfo={false} popupOpen={onPopupOpen.bind(this)}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, PopupOpenEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'Editor') {
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (statusElement) {
statusElement.setAttribute('name', 'EventType');
}
}
}
const editorTemplate = (props: Object): JSX.Element => {
return (props !== undefined ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Status</td><td colSpan={4}>
<DropDownListComponent id="EventType" placeholder='Choose status' data-name="EventType" className="e-field" style= dataSource={['New', 'Requested', 'Confirmed']} value={(props as any).EventType || null}></DropDownListComponent>
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" value={new Date((props as any).startTime || (props as any).StartTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" value={new Date((props as any).endTime || (props as any).EndTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style=></textarea>
</td></tr></tbody></table> : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings} editorTemplate={editorTemplate.bind(this)} showQuickInfo={false}
popupOpen={onPopupOpen.bind(this)} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to customize header and footer using template
The editor window’s header and footer can be enhanced with custom designs using the editorHeaderTemplate and editorFooterTemplate options. To achieve this, create a script template that includes the necessary fields. Ensure that the template type is set to text/x-template.
In this demo, we tailor the editor’s header according to the appointment’s subject field using the editorHeaderTemplate. Furthermore, we make use of the editorFooterTemplate to handle the functionality of validating specific fields before proceeding with the save action or canceling it if validation requirements are not met.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, PopupOpenEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
const App = () => {
const scheduleObj = useRef(null);
const today = new Date();
const data = [{
Id: 1,
Subject: 'Surgery - Andrew',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
IsAllDay: false
},
{
Id: 2,
Subject: 'Consulting - John',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
IsAllDay: false
},
{
Id: 3,
Subject: 'Therapy - Robert',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
IsAllDay: false
},
{
Id: 4,
Subject: 'Observation - Steven',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
IsAllDay: false
}];
const eventSettings = { dataSource: data };
const editorHeaderTemplate = (props) => {
return (
<div id="event-header">
{(props !== undefined) ? ((props.Subject) ? <div>{props.Subject}</div> : <div>Create New Event</div>) : <div></div>}
</div>
);
}
const editorFooterTemplate = () => {
return (
<div id="event-footer">
<div id="verify">
<input type="checkbox" id="check-box" value="unchecked" />
<label htmlFor="check-box" id="text">
Verified
</label>
</div>
<div id="right-button">
<button id="Save" className="e-control e-btn e-primary" disabled data-ripple="true">
Save
</button>
<button id="Cancel" className="e-control e-btn e-primary" data-ripple="true">
Cancel
</button>
</div>
</div>
);
}
const onSaveButtonClick = (args) => {
const data = {
Id: args.data.Id,
Subject: args.element.querySelector('#Subject').value,
StartTime: args.element.querySelector('#StartTime').ej2_instances[0].value,
EndTime: args.element.querySelector('#EndTime').ej2_instances[0].value,
IsAllDay: args.element.querySelector('#IsAllDay').checked
};
if (args.target.classList.contains('e-appointment')) {
scheduleObj.current.saveEvent(data, 'Save');
} else {
data.Id = scheduleObj.current.getEventMaxID();
scheduleObj.current.addEvent(data);
}
scheduleObj.current.closeEditor();
}
const onPopupOpen = (args) => {
if (args.type === 'Editor') {
setTimeout(() => {
const saveButton = args.element.querySelector('#Save');
const cancelButton = args.element.querySelector('#Cancel');
const checkBox = args.element.querySelector('#check-box');
checkBox.onchange = () => {
if (!checkBox.checked) {
saveButton.setAttribute('disabled', '');
} else {
saveButton.removeAttribute('disabled');
}
};
saveButton.onclick = () => {
onSaveButtonClick(args);
}
cancelButton.onclick = () => {
scheduleObj.current.closeEditor();
};
}, 100);
}
}
return (<ScheduleComponent width='100%' height='550px' ref={scheduleObj}
eventSettings={eventSettings}
editorHeaderTemplate={editorHeaderTemplate}
editorFooterTemplate={editorFooterTemplate}
popupOpen={onPopupOpen}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, PopupOpenEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const today: Date = new Date();
const data: Record<string, any>[] = [{
Id: 1,
Subject: 'Surgery - Andrew',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
IsAllDay: false
},
{
Id: 2,
Subject: 'Consulting - John',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
IsAllDay: false
},
{
Id: 3,
Subject: 'Therapy - Robert',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
IsAllDay: false
},
{
Id: 4,
Subject: 'Observation - Steven',
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
IsAllDay: false
}];
const eventSettings = { dataSource: data };
const editorHeaderTemplate = (props: Record<string, any>) => {
return (
<div id="event-header">
{(props !== undefined) ? ((props.Subject) ? <div>{props.Subject}</div> : <div>Create New Event</div>) : <div></div>}
</div>
);
}
const editorFooterTemplate = () => {
return (
<div id="event-footer">
<div id="verify">
<input type="checkbox" id="check-box" value="unchecked" />
<label htmlFor="check-box" id="text">Verified</label>
</div>
<div id="right-button">
<button id="Save" className="e-control e-btn e-primary" disabled data-ripple="true">
Save
</button>
<button id="Cancel" className="e-control e-btn e-primary" data-ripple="true">
Cancel
</button>
</div>
</div>
);
}
const onSaveButtonClick = (args: PopupOpenEventArgs) => {
const data: Record<string, any> = {
Id: args.data.Id,
Subject: (args.element.querySelector('#Subject') as HTMLInputElement).value,
StartTime: (args.element.querySelector('#StartTime') as any).ej2_instances[0].value,
EndTime: (args.element.querySelector('#EndTime') as any).ej2_instances[0].value,
IsAllDay: (args.element.querySelector('#IsAllDay') as HTMLInputElement).checked
};
if (args.target.classList.contains('e-appointment')) {
scheduleObj.current.saveEvent(data, 'Save');
} else {
data.Id = scheduleObj.current.getEventMaxID();
scheduleObj.current.addEvent(data);
}
scheduleObj.current.closeEditor();
}
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'Editor') {
setTimeout(() => {
const saveButton: HTMLElement = args.element.querySelector('#Save') as HTMLElement;
const cancelButton: HTMLElement = args.element.querySelector('#Cancel') as HTMLElement;
const checkBox: HTMLInputElement = args.element.querySelector('#check-box') as HTMLInputElement;
checkBox.onchange = () => {
if (!(checkBox as HTMLInputElement).checked) {
saveButton.setAttribute('disabled', '');
} else {
saveButton.removeAttribute('disabled');
}
};
saveButton.onclick = () => {
onSaveButtonClick(args);
}
cancelButton.onclick = () => {
scheduleObj.current.closeEditor();
};
}, 100);
}
}
return (<ScheduleComponent width='100%' height='550px' ref={scheduleObj}
eventSettings={eventSettings}
editorHeaderTemplate={editorHeaderTemplate}
editorFooterTemplate={editorFooterTemplate}
popupOpen={onPopupOpen}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-notification/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to add resource options within editor template
The resource field can be added within editor template with multiselect control for allow multiple resources.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, ResourcesDirective, ResourceDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import { eventData } from './datasource';
const App = () => {
const eventSettings = { dataSource: eventData };
const group = { resources: ['Owners'] };
const ownerData = [
{ OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
];
const fields = { text: 'OwnerText', value: 'Id' };
const editorTemplate = (props) => {
return (props !== undefined && Object.keys(props).length > 0 ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Owner</td><td colSpan={4}>
<MultiSelectComponent className="e-field" placeholder='Choose owner' data-name="OwnerId" dataSource={ownerData} fields={fields} value={props.OwnerId} />
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style=></textarea>
</td></tr></tbody></table> : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} editorTemplate={editorTemplate} showQuickInfo={false} group={group}>
<ResourcesDirective>
<ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={false} dataSource={ownerData} textField='OwnerText' idField='Id' allowGroupEdit={false} colorField='OwnerColor'></ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, EventSettingsModel,
ResourcesDirective, ResourceDirective, Inject
} from '@syncfusion/ej2-react-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import { eventData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: eventData };
const group = { resources: ['Owners'] };
const ownerData: Object[] = [
{ OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
];
const fields: object = { text: 'OwnerText', value: 'Id' };
const editorTemplate = (props: Object): JSX.Element => {
return (props !== undefined && Object.keys(props).length > 0 ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Owner</td><td colSpan={4}>
<MultiSelectComponent className="e-field" placeholder='Choose owner' data-name="OwnerId" dataSource={ownerData} fields={fields} value={props.OwnerId} />
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" value={new Date((props as any).startTime || (props as any).StartTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4} >
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" value={new Date((props as any).endTime || (props as any).EndTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50}
style=></textarea>
</td></tr></tbody></table> : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings} editorTemplate={editorTemplate} showQuickInfo={false}
group={group}>
<ResourcesDirective>
<ResourceDirective field='OwnerId' title='Owner' name='Owners' allowMultiple={false} dataSource={ownerData} textField='OwnerText' idField='Id' allowGroupEdit={false}
colorField='OwnerColor'></ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to add recurrence options within editor template
The following code example shows how to add recurrence options within the editor template by importing RecurrenceEditor.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, RecurrenceEditorComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject, PopupOpenEventArgs, EventSettingsModel } from '@syncfusion/ej2-react-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef(null);
const recurrObject = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onPopupClose = (args) => {
if (args.type === 'Editor' && args.data) {
args.data.RecurrenceRule = recurrObject.current.value;
}
}
const editorTemplate = (props) => {
return (props !== undefined ? (
<table className="custom-event-editor" style=>
<tbody>
<tr>
<td className="e-textlabel">Summary</td>
<td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td>
</tr>
<tr>
<td className="e-textlabel">Status</td>
<td colSpan={4}>
<DropDownListComponent
id="EventType"
placeholder="Choose status"
data-name="Status"
className="e-field"
style=
dataSource={['New', 'Requested', 'Confirmed']}
/>
</td>
</tr>
<tr>
<td className="e-textlabel">From</td>
<td colSpan={4}>
<DateTimePickerComponent
format="dd/MM/yy hh:mm a"
id="StartTime"
data-name="StartTime"
value={new Date(props.startTime || props.StartTime)}
className="e-field"
/>
</td>
</tr>
<tr>
<td className="e-textlabel">To</td>
<td colSpan={4}>
<DateTimePickerComponent
format="dd/MM/yy hh:mm a"
id="EndTime"
data-name="EndTime"
value={new Date(props.endTime || props.EndTime)}
className="e-field"
/>
</td>
</tr>
<tr>
<td className="e-textlabel">Recurrence</td>
<td colSpan={4}>
<RecurrenceEditorComponent ref={recurrObject} id="RecurrenceEditor" />
</td>
</tr>
<tr>
<td className="e-textlabel">Reason</td>
<td colSpan={4}>
<textarea
id="Description"
className="e-field e-input"
name="Description"
rows={3}
cols={50}
style=
/>
</td>
</tr>
</tbody>
</table>
) : '');
};
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
ref={scheduleObj}
eventSettings={eventSettings} editorTemplate={editorTemplate} showQuickInfo={false}
popupClose={onPopupClose}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, RecurrenceEditorComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject, PopupCloseEventArgs, EventSettingsModel } from '@syncfusion/ej2-react-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const recurrObject = useRef<RecurrenceEditorComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onPopupClose = (args: PopupCloseEventArgs): void => {
if (args.type === 'Editor' && args.data) {
args.data.RecurrenceRule = recurrObject.current.value;
}
}
const editorTemplate = (props: any) => {
return (props !== undefined ? (
<table className="custom-event-editor" style=>
<tbody>
<tr>
<td className="e-textlabel">Summary</td>
<td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td>
</tr>
<tr>
<td className="e-textlabel">Status</td>
<td colSpan={4}>
<DropDownListComponent
id="EventType"
placeholder="Choose status"
data-name="Status"
className="e-field"
style=
dataSource={['New', 'Requested', 'Confirmed']}
/>
</td>
</tr>
<tr>
<td className="e-textlabel">From</td>
<td colSpan={4}>
<DateTimePickerComponent
format="dd/MM/yy hh:mm a"
id="StartTime"
data-name="StartTime"
value={new Date(props.startTime || props.StartTime)}
className="e-field"
/>
</td>
</tr>
<tr>
<td className="e-textlabel">To</td>
<td colSpan={4}>
<DateTimePickerComponent
format="dd/MM/yy hh:mm a"
id="EndTime"
data-name="EndTime"
value={new Date(props.endTime || props.EndTime)}
className="e-field"
/>
</td>
</tr>
<tr>
<td className="e-textlabel">Recurrence</td>
<td colSpan={4}>
<RecurrenceEditorComponent ref={recurrObject} id="RecurrenceEditor" />
</td>
</tr>
<tr>
<td className="e-textlabel">Reason</td>
<td colSpan={4}>
<textarea
id="Description"
className="e-field e-input"
name="Description"
rows={3}
cols={50}
style=
/>
</td>
</tr>
</tbody>
</table>
) : '');
};
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
ref={scheduleObj}
eventSettings={eventSettings} editorTemplate={editorTemplate} showQuickInfo={false}
popupClose={onPopupClose}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Apply validations on editor template fields
In the following code example, validation has been added to the status field.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
if (args.type === 'Editor') {
let statusElement = args.element.querySelector('#EventType');
if (statusElement) {
statusElement.setAttribute('name', 'EventType');
}
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
document.getElementById("EventType_Error").style.left = "351px";
}
let formElement = args.element.querySelector('.e-schedule-form');
let validator = formElement.ej2_instances[0];
validator.addRules('EventType', { required: true });
}
}
const onSelect = (args) => {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
}
}
const editorTemplate = (props) => {
return ((props !== undefined) ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Status</td><td colSpan={4}>
<DropDownListComponent id="EventType" placeholder='Choose status' data-name='EventType' className="e-field" style= dataSource={['New', 'Requested', 'Confirmed']}>
</DropDownListComponent>
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent id="StartTime" format='dd/MM/yy hh:mm a' data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4}>
<DateTimePickerComponent id="EndTime" format='dd/MM/yy hh:mm a' data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style=></textarea>
</td></tr></tbody></table> : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} editorTemplate={editorTemplate} popupOpen={onPopupOpen} showQuickInfo={false}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month,
Inject, PopupOpenEventArgs, EJ2Instance, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'Editor') {
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (statusElement) {
statusElement.setAttribute('name', 'EventType');
}
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
document.getElementById("EventType_Error").style.left = "351px";
}
let formElement: HTMLElement = args.element.querySelector('.e-schedule-form') as HTMLElement;
let validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator);
validator.addRules('EventType', { required: true });
}
}
const onSelect = (args: any): void => {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
}
}
const editorTemplate = (props: Object): JSX.Element => {
return ((props !== undefined) ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-field e-input" type="text" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Status</td><td colSpan={4}>
<DropDownListComponent id="EventType" placeholder='Choose status' data-name='EventType' className="e-field" style=
dataSource={['New', 'Requested', 'Confirmed']}>
</DropDownListComponent>
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent id="StartTime" format='dd/MM/yy hh:mm a' data-name="StartTime" value={new Date((props as any).startTime || (props as any).StartTime)}
className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4}>
<DateTimePickerComponent id="EndTime" format='dd/MM/yy hh:mm a' data-name="EndTime" value={new Date((props as any).endTime || (props as any).EndTime)}
className="e-field"></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50}
style=></textarea>
</td></tr></tbody></table > : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings}
editorTemplate={editorTemplate} popupOpen={onPopupOpen}
showQuickInfo={false}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to save the customized event editor using template
The e-field class is not added to each field defined within the template, so you should allow to set those field values externally by using the popupClose event.
Note: You can allow to retrieve the data only on the save and delete option. Data cannot be retrieved on the close and cancel options in the editor window.
The following code example shows how to save the customized event editor using a template by the popupClose event.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const startObj = useRef(null);
const endObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
if (args.type === 'Editor') {
let subjectElement = args.element.querySelector('#Summary');
if (subjectElement) {
subjectElement.value = args.data.Subject || "";
}
let statusElement = args.element.querySelector('#EventType');
if (statusElement) {
statusElement.setAttribute('name', 'EventType');
}
let descriptionElement = args.element.querySelector('#Description');
if (descriptionElement) {
descriptionElement.value = args.data.Description || "";
}
}
}
const onPopupClose = (args) => {
if (args.type === 'Editor' && !isNullOrUndefined(args.data)) {
let subjectElement = args.element.querySelector('#Summary');
if (subjectElement) {
args.data.Subject = subjectElement.value;
}
let statusElement = args.element.querySelector('#EventType');
if (statusElement) {
args.data.EventType = statusElement.value;
}
args.data.StartTime = startObj.current.value;
args.data.EndTime = endObj.current.value;
let descriptionElement = args.element.querySelector('#Description');
if (descriptionElement) {
args.data.Description = descriptionElement.value;
}
}
}
function editorTemplate(props) {
return (props !== undefined ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-input" type="text" value="" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Status</td><td colSpan={4}>
<DropDownListComponent id="EventType" placeholder='Choose status' data-name="EventType" style= dataSource={['New', 'Requested', 'Confirmed']} value={props.EventType || null}></DropDownListComponent>
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" ref={startObj} value={new Date(props.startTime || props.StartTime)}></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" ref={endObj} value={new Date(props.endTime || props.EndTime)}></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-input" name="Description" rows={3} cols={50} style=></textarea>
</td></tr></tbody></table> : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} editorTemplate={editorTemplate} showQuickInfo={false} popupOpen={onPopupOpen} popupClose={onPopupClose}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, PopupOpenEventArgs, EventSettingsModel, PopupCloseEventArgs, Inject
} from '@syncfusion/ej2-react-schedule';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { scheduleData } from './datasource';
const App = () => {
const startObj = useRef<DateTimePickerComponent>(null);
const endObj = useRef<DateTimePickerComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'Editor') {
let subjectElement: HTMLInputElement = args.element.querySelector('#Summary') as HTMLInputElement;
if (subjectElement) {
subjectElement.value = ((args.data as { [key: string]: Object })).Subject as string || "";
}
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (statusElement) {
statusElement.setAttribute('name', 'EventType');
}
let descriptionElement: HTMLInputElement = args.element.querySelector('#Description') as HTMLInputElement;
if (descriptionElement) {
descriptionElement.value = ((args.data as { [key: string]: Object })).Description as string || "";
}
}
}
const onPopupClose = (args: PopupCloseEventArgs): void => {
if (args.type === 'Editor' && !isNullOrUndefined(args.data as { [key: string]: Object })) {
let subjectElement: HTMLInputElement = args.element.querySelector('#Summary') as HTMLInputElement;
if (subjectElement) {
((args.data as { [key: string]: Object })).Subject = subjectElement.value;
}
let statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (statusElement) {
((args.data as { [key: string]: Object })).EventType = statusElement.value;
}
((args.data as { [key: string]: Object })).StartTime = startObj.current.value;
((args.data as { [key: string]: Object })).EndTime = endObj.current.value;
let descriptionElement: HTMLInputElement = args.element.querySelector('#Description') as HTMLInputElement;
if (descriptionElement) {
((args.data as { [key: string]: Object })).Description = descriptionElement.value;
}
}
}
const editorTemplate = (props: Object): JSX.Element => {
return (props !== undefined ? <table className="custom-event-editor" style=><tbody>
<tr><td className="e-textlabel">Summary</td><td colSpan={4}>
<input id="Summary" className="e-input" type="text" value="" name="Subject" style= />
</td></tr>
<tr><td className="e-textlabel">Status</td><td colSpan={4}>
<DropDownListComponent id="EventType" placeholder='Choose status' data-name="EventType" style= dataSource={['New', 'Requested', 'Confirmed']} value={(props as any).EventType || null}></DropDownListComponent>
</td></tr>
<tr><td className="e-textlabel">From</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" ref={startObj} value={new Date((props as any).startTime || (props as any).StartTime)}></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">To</td><td colSpan={4}>
<DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" ref={endObj} value={new Date((props as any).endTime || (props as any).EndTime)}></DateTimePickerComponent>
</td></tr>
<tr><td className="e-textlabel">Reason</td><td colSpan={4}>
<textarea id="Description" className="e-input" name="Description" rows={3} cols={50} style=></textarea>
</td></tr></tbody></table> : <div></div>);
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
eventSettings={eventSettings} editorTemplate={editorTemplate} showQuickInfo={false}
popupOpen={onPopupOpen} popupClose={onPopupClose} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
<ViewDirective option='Agenda' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the popupClose event are as follows.
| Type | Description |
|---|---|
| Editor | For Detailed editor window. |
| QuickInfo | For Quick popup which opens on cell click. |
| EditEventInfo | For Quick popup which opens on event click. |
| ViewEventInfo | For Quick popup which opens on responsive mode. |
| EventContainer | For more event indicator popup. |
| RecurrenceAlert | For edit recurrence event alert popup. |
| DeleteAlert | For delete confirmation popup. |
| ValidationAlert | For validation alert popup. |
| RecurrenceValidationAlert | For recurrence validation alert popup. |
Quick popups
The quick info popups are the ones that gets opened, when a cell or appointment is single clicked on the desktop mode. On single clicking a cell, you can simply provide a subject and save it. Also, while single clicking on an event, a popup will be displayed where you can get the overview of the event information. You can also edit or delete those events through the options available in it.
By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set false to showQuickInfo property.
The quick popup that opens while single clicking on the cells are not applicable on mobile devices.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, TimelineViews, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} showQuickInfo={false} eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='TimelineWeek' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
</ViewsDirective>
<Inject services={[Day, TimelineViews, Week, WorkWeek]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, TimelineViews, Inject, ViewsDirective, ViewDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} showQuickInfo={false} eventSettings={eventSettings} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='TimelineWeek' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
</ViewsDirective>
<Inject services={[Day, TimelineViews, Week, WorkWeek]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to open QuickInfo popup on multiple cell selection
By default the QuickInfo popup will open on single click of the cell. To open the quick info popup on multiple cell selection, you need to select the cells and press enter key. You can open this popup immediately after multiple cell selection by setting up true to quickInfoOnSelectionEndquickInfoOnSelectionEnd property where as its default value is false.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ScheduleComponent, Day, Week, WorkWeek, TimelineViews, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
const App = () => {
return (<ScheduleComponent width='100%' height='550px' quickInfoOnSelectionEnd={true}>
<ViewsDirective>
<ViewDirective option='Day'/>
<ViewDirective option='TimelineWeek'/>
<ViewDirective option='Week'/>
<ViewDirective option='WorkWeek'/>
</ViewsDirective>
<Inject services={[Day, TimelineViews, Week, WorkWeek]}/>
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
ScheduleComponent, Day, Week, WorkWeek, TimelineViews, Inject, ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
const App = () => {
return (<ScheduleComponent width='100%' height='550px' quickInfoOnSelectionEnd={true} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='TimelineWeek' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
</ViewsDirective>
<Inject services={[Day, TimelineViews, Week, WorkWeek]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to change the watermark text of quick popup subject
By default, Add Title text is displayed on the subject field of quick popup. To change the default watermark text, change the value of the appropriate localized word collection used in the Scheduler.
L10n.load({
'en-US': {
'schedule': {
'addTitle' : 'New Title'
}
}
});Customizing quick popups
The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the quickInfoTemplates property of the Scheduler. There are 3 sub-options available to customize them easily,
- header - Accepts the template design that customizes the header part of the quick popup.
- content - Accepts the template design that customizes the content part of the quick popup.
- footer - Accepts the template design that customizes the footer part of the quick popup.
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { isNullOrUndefined } from "@syncfusion/ej2-base";
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from "@syncfusion/ej2-react-schedule";
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const buttonClickActions = (e) => {
let eventData = {};
let actionType = "Add";
const action = e.target.id;
const getSlotData = () => {
const cellDetails = scheduleObj.current.getCellDetails(scheduleObj.current.getSelectedElements());
const eventData = scheduleObj.current.eventWindow.getObjectFromFormData("e-quick-popup-wrapper");
const addObj = {};
addObj.Id = scheduleObj.current.getEventMaxID();
addObj.Subject = eventData.Subject.length > 0 ? eventData.Subject : "Add title";
addObj.StartTime = new Date(+cellDetails.startTime);
addObj.EndTime = new Date(+cellDetails.endTime);
addObj.Location = eventData.Location;
return addObj;
};
switch (action) {
case "add":
eventData = getSlotData();
scheduleObj.current.addEvent(eventData);
break;
case "edit":
case "edit-series":
eventData = scheduleObj.current.activeEventData.event;
actionType = eventData.RecurrenceRule ? action === "edit" ? "EditOccurrence" : "EditSeries" : "Save";
if (actionType === "EditSeries")
eventData = scheduleObj.current.eventBase.getParentEvent(eventData, true);
scheduleObj.current.openEditor(eventData, actionType);
break;
case "delete":
case "delete-series":
eventData = scheduleObj.current.activeEventData.event;
actionType = eventData.RecurrenceRule ? action === "delete" ? "DeleteOccurrence" : "DeleteSeries" : "Delete";
if (actionType === "DeleteSeries")
eventData = scheduleObj.current.eventBase.getParentEvent(eventData, true);
scheduleObj.current.deleteEvent(eventData, actionType);
break;
case "more-details":
eventData = getSlotData();
scheduleObj.current.openEditor(eventData, "Add", true);
break;
default:
break;
}
scheduleObj.current.closeQuickInfoPopup();
}
const header = (props) => {
return (
<div>
{props.elementType === "cell" ? (
<div className="e-cell-header e-popup-header">
<div className="e-header-icon-wrapper">
<button id="close" className="e-close e-close-icon e-icons" title="Close" onClick={buttonClickActions.bind(this)} />
</div>
</div>
) : (
<div className="e-event-header e-popup-header">
<div className="e-header-icon-wrapper">
<button id="close" className="e-close e-close-icon e-icons" title="CLOSE" onClick={buttonClickActions.bind(this)} />
</div>
</div>
)}
</div>
);
}
const content = (props) => {
return (
<div>
{props.elementType === "cell" ? (
<div className="e-cell-content e-template">
<form className="e-schedule-form">
<div>
<input className="subject e-field e-input" type="text" name="Subject" placeholder="Title" />
</div>
<div>
<input className="location e-field e-input" type="text" name="Location" placeholder="Location" />
</div>
</form>
</div>
) : (
<div className="e-event-content e-template">
<div className="e-subject-wrap">
{props.Subject !== undefined ? (
<div className="subject">{props.Subject}</div>
) : (
""
)}
{props.Location !== undefined ? (
<div className="location">{props.Location}</div>
) : (
""
)}
{props.Description !== undefined ? (
<div className="description">{props.Description}</div>
) : (
""
)}
</div>
</div>
)}
</div>
);
}
const footer = (props) => {
return (
<div>
{props.elementType === "cell" ? (
<div className="e-cell-footer">
<div className="left-button">
<button id="more-details" className="e-event-details" title="Extra Details" onClick={buttonClickActions.bind(this)}> Extra Details </button>
</div>
<div className="right-button">
<button id="add" className="e-event-create" title="Add" onClick={buttonClickActions.bind(this)} > Add </button>
</div>
</div>
) : (
<div className="e-event-footer">
<div className="left-button">
<button id="edit" className="e-event-edit" title="Edit" onClick={buttonClickActions.bind(this)} > Edit </button>
{!isNullOrUndefined(props.RecurrenceRule) &&
props.RecurrenceRule !== "" ? (
<button id="edit-series" className="e-edit-series" title="Edit Series" onClick={buttonClickActions.bind(this)}> Edit Series </button>
) : (
""
)}
</div>
<div className="right-button">
<button id="delete" className="e-event-delete" title="Delete" onClick={buttonClickActions.bind(this)} > Delete </button>
{!isNullOrUndefined(props.RecurrenceRule) &&
props.RecurrenceRule !== "" ? (
<button id="delete-series" className="e-delete-series" title="Delete Series" onClick={buttonClickActions.bind(this)}> Delete Series </button>
) : (
""
)}
</div>
</div>
)}
</div>
);
}
const quickInfoTemplates = { header: header.bind(this), content: content.bind(this), footer: footer.bind(this) };
return (<ScheduleComponent id="schedule" ref={scheduleObj} width="100%" height="550px" selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} quickInfoTemplates={quickInfoTemplates}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { isNullOrUndefined } from "@syncfusion/ej2-base";
import { ScheduleComponent, Day, Week, WorkWeek, Month, EventSettingsModel, Agenda, Inject, CellClickEventArgs, CurrentAction, Resize, DragAndDrop } from "@syncfusion/ej2-react-schedule";
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const buttonClickActions = (e: Event): void => {
let eventData: { [key: string]: Object } = {};
let actionType: CurrentAction = "Add";
const action: string = (e.target as HTMLElement).id;
const getSlotData: Function = (): { [key: string]: Object } => {
const cellDetails: CellClickEventArgs = scheduleObj.current.getCellDetails(scheduleObj.current.getSelectedElements());
const eventData: { [key: string]: Object; } = scheduleObj.current.eventWindow.getObjectFromFormData("e-quick-popup-wrapper");
const addObj: { [key: string]: Object } = {};
addObj.Id = scheduleObj.current.getEventMaxID();
addObj.Subject = (eventData.Subject as string).length > 0 ? eventData.Subject : "Add title";
addObj.StartTime = new Date(+cellDetails.startTime);
addObj.EndTime = new Date(+cellDetails.endTime);
addObj.Location = eventData.Location;
return addObj;
};
switch (action) {
case "add":
eventData = getSlotData();
scheduleObj.current.addEvent(eventData);
break;
case "edit":
case "edit-series":
eventData = scheduleObj.current.activeEventData.event as { [key: string]: Object; };
actionType = eventData.RecurrenceRule ? action === "edit" ? "EditOccurrence" : "EditSeries" : "Save";
if (actionType === "EditSeries")
eventData = scheduleObj.current.eventBase.getParentEvent(eventData, true);
scheduleObj.current.openEditor(eventData, actionType);
break;
case "delete":
case "delete-series":
eventData = scheduleObj.current.activeEventData.event as { [key: string]: Object; };
actionType = eventData.RecurrenceRule ? action === "delete" ? "DeleteOccurrence" : "DeleteSeries" : "Delete";
if (actionType === "DeleteSeries")
eventData = scheduleObj.current.eventBase.getParentEvent(eventData, true);
scheduleObj.current.deleteEvent(eventData, actionType);
break;
case "more-details":
eventData = getSlotData();
scheduleObj.current.openEditor(eventData, "Add", true);
break;
default:
break;
}
scheduleObj.current.closeQuickInfoPopup();
}
const header = (props: { [key: string]: string }): JSX.Element => {
return (
<div>
{props.elementType === "cell" ? (
<div className="e-cell-header e-popup-header">
<div className="e-header-icon-wrapper">
<button id="close" className="e-close e-close-icon e-icons" title="Close" onClick={buttonClickActions.bind(this)} />
</div>
</div>
) : (
<div className="e-event-header e-popup-header">
<div className="e-header-icon-wrapper">
<button id="close" className="e-close e-close-icon e-icons" title="CLOSE" onClick={buttonClickActions.bind(this)} />
</div>
</div>
)}
</div>
);
}
const content = (props: { [key: string]: string }): JSX.Element => {
return (
<div>
{props.elementType === "cell" ? (
<div className="e-cell-content e-template">
<form className="e-schedule-form">
<div>
<input className="subject e-field e-input" type="text" name="Subject" placeholder="Title" />
</div>
<div>
<input className="location e-field e-input" type="text" name="Location" placeholder="Location" />
</div>
</form>
</div>
) : (
<div className="e-event-content e-template">
<div className="e-subject-wrap">
{props.Subject !== undefined ? (
<div className="subject">{props.Subject}</div>
) : (
""
)}
{props.Location !== undefined ? (
<div className="location">{props.Location}</div>
) : (
""
)}
{props.Description !== undefined ? (
<div className="description">{props.Description}</div>
) : (
""
)}
</div>
</div>
)}
</div>
);
}
const footer = (props: { [key: string]: string }): JSX.Element => {
return (
<div>
{props.elementType === "cell" ? (
<div className="e-cell-footer">
<div className="left-button">
<button id="more-details" className="e-event-details" title="Extra Details" onClick={buttonClickActions.bind(this)}> Extra Details </button>
</div>
<div className="right-button">
<button id="add" className="e-event-create" title="Add" onClick={buttonClickActions.bind(this)} > Add </button>
</div>
</div>
) : (
<div className="e-event-footer">
<div className="left-button">
<button id="edit" className="e-event-edit" title="Edit" onClick={buttonClickActions.bind(this)} > Edit </button>
{!isNullOrUndefined(props.RecurrenceRule) &&
props.RecurrenceRule !== "" ? (
<button id="edit-series" className="e-edit-series" title="Edit Series" onClick={buttonClickActions.bind(this)}> Edit Series </button>
) : (
""
)}
</div>
<div className="right-button">
<button id="delete" className="e-event-delete" title="Delete" onClick={buttonClickActions.bind(this)} > Delete </button>
{!isNullOrUndefined(props.RecurrenceRule) &&
props.RecurrenceRule !== "" ? (
<button id="delete-series" className="e-delete-series" title="Delete Series" onClick={buttonClickActions.bind(this)}> Delete Series </button>
) : (
""
)}
</div>
</div>
)}
</div>
);
}
const quickInfoTemplates = { header: header.bind(this), content: content.bind(this), footer: footer.bind(this) };
return (<ScheduleComponent id="schedule" ref={scheduleObj} width="100%" height="550px" selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} quickInfoTemplates={quickInfoTemplates}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<link href="index.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>The quick popup in adaptive mode can also be customized using
quickInfoTemplatesusinge-deviceclass.
More events indicator and popup
When the number of appointments count that lies on a particular time range * default appointment height exceeds the default height of a cell in month view and all other timeline views, a + more text indicator will be displayed at the bottom of those cells. This indicator denotes that the cell contains few more appointments in it and clicking on that will display a popup displaying all the appointments present on that day.
To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the
popupOpenevent.
The same indicator is displayed on all-day row in calendar views such as day, week and work week views alone, when the number of appointment count present in a cell exceeds three. Clicking on the text indicator here will not open a popup, but will allow the expand/collapse option for viewing the remaining appointments present in the all-day row.
The following code example shows how to disable the display of such popups while clicking on the more text indicator.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
if (args.type === 'EventContainer') {
args.cancel = true;
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} currentView='Month' eventSettings={eventSettings} popupOpen={onPopupOpen}>
<ViewsDirective>
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Month, PopupOpenEventArgs, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'EventContainer') {
args.cancel = true;
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
currentView='Month'
eventSettings={eventSettings} popupOpen={onPopupOpen} >
<ViewsDirective>
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to customize the popup that opens on more indicator
The following code example shows you how to customize the default more indicator popup in which number of events rendered count on the day has been shown in the header.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onPopupOpen = (args) => {
if (args.type === 'EventContainer') {
let instance = new Internationalization();
let date = instance.formatDate(args.data.date, { skeleton: 'MMMEd' });
(args.element.querySelector('.e-header-date')).innerText = date;
(args.element.querySelector('.e-header-day')).innerText = 'Event count: ' + args.data.event.length;
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} currentView='Month' eventSettings={eventSettings} popupOpen={onPopupOpen}>
<ViewsDirective>
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Month, PopupOpenEventArgs, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onPopupOpen = (args: PopupOpenEventArgs): void => {
if (args.type === 'EventContainer') {
let instance: Internationalization = new Internationalization();
let date: string = instance.formatDate(args.data.date, { skeleton: 'MMMEd' });
((args.element.querySelector('.e-header-date')) as HTMLElement).innerText = date;
((args.element.querySelector('.e-header-day')) as HTMLElement).innerText = 'Event count: ' + args.data.event.length;
}
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
currentView='Month'
eventSettings={eventSettings} popupOpen={onPopupOpen} >
<ViewsDirective>
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to prevent the display of popup when clicking on the more text indicator
It is possible to prevent the display of popup window by passing the value true to cancel option within the MoreEventsClick event.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onMoreEventsClick = (args) => {
args.cancel = true;
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} currentView='Month' eventSettings={eventSettings} moreEventsClick={onMoreEventsClick}>
<ViewsDirective>
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Month]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Month, MoreEventsClickArgs, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onMoreEventsClick = (args: MoreEventsClickArgs): void => {
args.cancel = true;
}
return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
currentView='Month'
eventSettings={eventSettings} moreEventsClick={onMoreEventsClick} >
<ViewsDirective>
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Month]} />
</ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to navigate Day view when clicking on more text indicator
The following code example shows you how to customize the MoreEventsClick property to navigate to the Day view when clicking on the more text indicator.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Month, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings = { dataSource: scheduleData };
const onMoreEventsClick = (args) => {
args.isPopupOpen = false;
}
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} currentView='Month' eventSettings={eventSettings} moreEventsClick={onMoreEventsClick}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Month]} />
</ScheduleComponent>;
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
ScheduleComponent, ViewsDirective, ViewDirective, Day, Month, MoreEventsClickArgs, Inject, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onMoreEventsClick = (args: MoreEventsClickArgs): void => {
args.isPopupOpen = false;
}
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)}
currentView='Month'
eventSettings={eventSettings} moreEventsClick={onMoreEventsClick} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Month]} />
</ScheduleComponent>
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to close the editor window manually
You can close the editor window by using closeEditor method.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const App = () => {
const scheduleObj = useRef(null);
const ClickButton = () => {
scheduleObj.current.closeEditor();
}
const data = [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
}];
const eventSettings = { dataSource: data };
return (<div>
<ButtonComponent onClick={ClickButton}>Close Editor Window </ButtonComponent>
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2023, 2, 5)} ref={scheduleObj} currentView='Month' eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, EventSettingsModel, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const ClickButton = () => {
scheduleObj.current.closeEditor();
}
const data: object[] = [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
}];
const eventSettings: EventSettingsModel = { dataSource: data };
return (<div>
<ButtonComponent onClick={ClickButton}>Close Editor Window </ButtonComponent>
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2023, 2, 5)}
ref={scheduleObj} currentView='Month'
eventSettings={eventSettings} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to open the quick info popup manually
You can open the quick info popup in scheduler by using the openQuickInfoPopup public method. To open the cell quick info popup, you can pass the cell data as an argument to the method. To open the event quick info popup, you should pass the event data object as an argument to the method.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const App = () => {
const scheduleObj = useRef(null);
const onCellClickButton = () => {
let cellData = {
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
};
scheduleObj.current.openQuickInfoPopup(cellData, 'Add');
}
const onEventClickButton = () => {
let eventData = {
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
};
scheduleObj.current.openQuickInfoPopup(eventData, 'Save');
}
const data = [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
}];
const eventSettings = { dataSource: data };
return (<div>
<ButtonComponent id='btn1' onClick={onCellClickButton}>Show Cell Click Popup </ButtonComponent>
<ButtonComponent id='btn2' onClick={onEventClickButton}>Show Event Click Popup </ButtonComponent>
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2023, 2, 5)} ref={scheduleObj} currentView='Month' eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as React from 'react';
import { useRef } from 'react';
import * as ReactDOM from 'react-dom';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, EventSettingsModel, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const onCellClickButton = () => {
const cellData = {
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
};
scheduleObj.current.openQuickInfoPopup(cellData, 'Add');
};
const onEventClickButton = () => {
const eventData = {
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
};
scheduleObj.current.openQuickInfoPopup(eventData, 'Save');
};
const data = [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
}];
const eventSettings: EventSettingsModel = { dataSource: data };
return (
<div>
<ButtonComponent id='btn1' onClick={onCellClickButton}>Show Cell Click Popup </ButtonComponent>
<ButtonComponent id='btn2' onClick={onEventClickButton}>Show Event Click Popup </ButtonComponent>
<ScheduleComponent
width='100%'
height='550px'
selectedDate={new Date(2023, 2, 5)}
ref={scheduleObj}
currentView='Month'
eventSettings={eventSettings}
>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to close the quick info popup manually
You can close the quick info popup in scheduler by using the closeQuickInfoPopup public method. The following code example demonstrates the how to close quick info popup manually.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const App = () => {
const scheduleObj = useRef(null);
const ClickButton = () => {
scheduleObj.current.closeQuickInfoPopup();
}
const data = [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
}];
const eventSettings = { dataSource: data };
return (<div>
<ButtonComponent onClick={ClickButton.bind(this)}>Close QuickInfo Popup</ButtonComponent>
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2023, 2, 5)} ref={scheduleObj} currentView='Month' eventSettings={eventSettings}>
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { Day, Week, WorkWeek, Month, ScheduleComponent, ViewsDirective, ViewDirective, EventSettingsModel, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const ClickButton = () => {
scheduleObj.current.closeQuickInfoPopup();
}
const data: object[] = [{
Id: 1,
Subject: 'Review Meeting',
StartTime: new Date(2023, 2, 5, 9, 0, 0),
EndTime: new Date(2023, 2, 5, 10, 0, 0)
}];
const eventSettings: EventSettingsModel = { dataSource: data };
return (<div>
<ButtonComponent onClick={ClickButton.bind(this)}>Close QuickInfo Popup</ButtonComponent>
<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2023, 2, 5)}
ref={scheduleObj} currentView='Month'
eventSettings={eventSettings} >
<ViewsDirective>
<ViewDirective option='Day' />
<ViewDirective option='Week' />
<ViewDirective option='WorkWeek' />
<ViewDirective option='Month' />
</ViewsDirective>
<Inject services={[Day, Week, WorkWeek, Month]} />
</ScheduleComponent>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);<!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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>You can refer to our React Scheduler feature tour page for its groundbreaking feature representations. You can also explore our React Scheduler example to knows how to present and manipulate data.