Editor Window Customization in React Scheduler
The Scheduler uses popups and dialogs to display notifications and provides a detailed event editor window to simplify appointment creation and editing. You can customize this editor window, its fields, and apply validations as needed.
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.
Note: You can prevent the editor window from opening by rendering the Scheduler in
readonlymode or by implementing code customization within thepopupOpenevent.
How to change the editor window header title and text of footer buttons
You can customize the header title and footer button text by updating the corresponding localized strings 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Field validation
To ensure data quality, you can validate required fields in the editor window on the client-side before submission by adding validation rules to each field.
Important: The appointment fields accept both
stringandobjecttype values. To perform validations, specifyobjectvalues for the event fields instead of simple strings.
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Tip: For a comprehensive list of available validation rules, refer to the Form Validation documentation.
Add additional fields to the default editor
To extend the default event editor with custom fields, use the popupOpen event, which triggers before the editor opens on the Scheduler.
Key Requirements:
- The additional field (any form element) must have the class name
e-fieldto enable automatic processing - This ensures the custom field data is handled along with the default event object
- In the following example, an
Event Typefield has been added and its value is processed with the event data
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customizing the default time duration in editor window
By default, the start and end time duration in the event editor are based on the interval value set in the timeScale property.
Note: The default
intervalvalue is30minutes. To customize this duration, modify thedurationoption in thepopupOpenevent.
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to prevent the display of editor and quick popups
To prevent the editor or quick info popup from appearing, set the cancel property to true in 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>To prevent only specific popups, check the type property in the popupOpen event arguments. The available popup types are:
| 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customizing event editor using template
The event editor window can be fully customized using the editorTemplate option. This allows you to design a custom editor with required fields using script templates of type text/x-template.
Template Requirements:
- Each field must have the e-field class for internal processing
- Assign the template ID to the
editorTemplateoption - Custom fields will replace the default editor window
Note: The e-field class is applicable only for DropDownList, DateTimePicker, MultiSelect, DatePicker, CheckBox, and TextBox components. These components have built-in field processing support.
Important: When using Syncfusion® sub-components in custom templates, configure them as required Syncfusion® components (e.g., DropDownList, DateTimePicker) within the
popupOpenevent. This step can be skipped if using standard HTML 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-notification/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to add resource options within editor template
You can include a resource field with multiple selection support using a MultiSelect control in the editor template.
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to add recurrence options within editor template
The following example demonstrates how to include recurrence options in the editor template by importing and using the RecurrenceEditor component.
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Apply validations on editor template fields
The following example applies validation to the status field in a custom editor template.
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to save the customized event editor using template
When custom fields in your template do not have the e-field class, you must handle field values externally using the popupClose event.
Important: Data can only be retrieved when users click
saveordelete. Data is not retrieved when they clickcloseorcancelin the editor window. Plan your custom field handling accordingly.
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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
Quick info popups appear when users single-click a cell or event on desktop mode. They provide a lightweight way to:
- Add a quick event by providing a subject and saving it (on cell click)
- View event overview information (on event click)
- Edit or delete events through available options
To disable quick info popups, set showQuickInfo to false.
Note: Quick popups on cell single-click are not supported on mobile devices. Mobile users must use the detailed editor window instead.
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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>How to open QuickInfo popup on multiple cell selection
By default, the QuickInfo popup opens on single cell click. To open it after multiple cell selection:
- Select the desired cells
- Press
Enterkey
Alternatively, you can automatically open the quick info popup immediately after multiple cell selection by setting quickInfoOnSelectionEnd to true (default 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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 appearance and behavior of quick popup windows can be customized using the quickInfoTemplates property of the Scheduler.
Tip: The
quickInfoTemplatesproperty provides multiple sub-options to customize quick popups for different scenarios (cell click, event click, responsive view). Refer to the API documentation for all available template options.
- 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.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>
</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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-react-schedule/styles/tailwind3.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>