Exporting in React Scheduler
The Scheduler supports exporting all its appointments both to an Excel or ICS extension file at client-side. It offers different client-side methods to export its appointments in an Excel or iCal format file. Let’s look onto the ways on how to implement the exporting functionality in Scheduler.
Excel Exporting
The Scheduler enables exporting events to an Excel file using the exportToExcel method. By default, it includes all fields mapped in the eventSettings property.
Important: Before using Excel exporting functionality, you must import and inject the
ExcelExportmodule from the@syncfusion/ej2-schedulepackage using theInjectmethod of the Scheduler component.
import * as ReactDOM from 'react-dom';
import { useRef } from 'react';
import * as React from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
scheduleObj.current.exportToExcel();
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</ScheduleComponent>);
}
;
const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);import * as ReactDOM from 'react-dom';
import { useRef } from 'react';
import * as React from 'react';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
scheduleObj.current.exportToExcel();
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>Exporting with custom fields
By default, the Scheduler exports all default event fields mapped through the eventSettings property. To limit exported fields, you can export only specific custom fields.
To export custom fields:
- Define the required
fieldsthrough theeventSettingsinterface - Pass the fields array as an argument to the
exportToExcelmethod
Example fields array: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
let exportValues = {
fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
};
scheduleObj.current.exportToExcel(exportValues);
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
let exportValues: ExportOptions = {
fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
};
scheduleObj.current.exportToExcel(exportValues);
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>Exporting individual occurrences of a recurring series
By default, the Scheduler exports recurring events as a single parent record. To export each individual occurrence of a recurring series as separate records:
- Set
includeOccurrencestotruein theExportOptionsinterface - Pass the options as an argument to
exportToExcel
Note: The default value of
includeOccurrencesisfalse. Set it totrueto expand recurring events into individual rows.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
let exportValues = { includeOccurrences: true };
scheduleObj.current.exportToExcel(exportValues);
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
let exportValues: ExportOptions = { includeOccurrences: true };
scheduleObj.current.exportToExcel(exportValues);
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>Exporting custom event data
By default, all events from the Scheduler’s dataSource are exported. To export only specific events or a custom event collection:
- Define the custom collection
- Pass it through the
customDataoption of theExportOptionsinterface - Pass the options to the
exportToExcelmethod
Note: Without specifying
customData, the Scheduler exports all events from its dataSource property.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
let exportValues = {
customData: [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 9, 30),
EndTime: new Date(2019, 0, 6, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
Location: 'Newyork City',
StartTime: new Date(2019, 0, 7, 12, 0),
EndTime: new Date(2019, 0, 7, 14, 0),
CategoryColor: '#357cd2'
}]
};
scheduleObj.current.exportToExcel(exportValues);
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
let exportValues: ExportOptions = {
customData: [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 9, 30),
EndTime: new Date(2019, 0, 6, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
Location: 'Newyork City',
StartTime: new Date(2019, 0, 7, 12, 0),
EndTime: new Date(2019, 0, 7, 14, 0),
CategoryColor: '#357cd2'
}]
};
scheduleObj.current.exportToExcel(exportValues);
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>Customizing column header with custom fields exporting
When exporting custom fields, you can customize the column headers using the fieldsInfo option.
Tip: The
fieldsproperty alone exports defined fields without header customization. UsefieldsInfowith theExportFieldInfointerface to define custom header display names for each field.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
let customFields = [
{ name: 'Subject', text: 'Summary' },
{ name: 'StartTime', text: 'First Date' },
{ name: 'EndTime', text: 'Last Date' },
{ name: 'Location', text: 'Place' },
{ name: 'OwnerId', text: 'Owners' }
];
let exportValues = { fieldsInfo: customFields };
scheduleObj.current.exportToExcel(exportValues);
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions, ExportFieldInfo,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
let customFields: ExportFieldInfo[] = [
{ name: 'Subject', text: 'Summary' },
{ name: 'StartTime', text: 'First Date' },
{ name: 'EndTime', text: 'Last Date' },
{ name: 'Location', text: 'Place' },
{ name: 'OwnerId', text: 'Owners' }
];
let exportValues: ExportOptions = { fieldsInfo: customFields };
scheduleObj.current.exportToExcel(exportValues);
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>Export with custom file name
The default exported file name is Schedule.xlsx. Customize it by setting fileName in ExportOptions and passing the options to exportToExcel.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
let exportValues = { fileName: "SchedulerData" };
scheduleObj.current.exportToExcel(exportValues);
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
let exportValues: ExportOptions = { fileName: "SchedulerData" };
scheduleObj.current.exportToExcel(exportValues);
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin} >
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>Excel file formats
The Scheduler supports exporting to both .xlsx (Excel) and .csv (Comma-Separated Values) formats.
Supported formats:
-
.xlsx- Excel format (default) -
.csv- Comma-separated values format
To change the export format, set the exportType option in the ExportOptions interface to either 'xlsx' or 'csv'.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
let exportValues = { exportType: "csv" };
scheduleObj.current.exportToExcel(exportValues);
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
let exportValues: ExportOptions = { exportType: "csv" };
scheduleObj.current.exportToExcel(exportValues);
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>Custom separator in CSV
When exporting to CSV, the default separator is ,. Change it by setting the separator property in ExportOptions.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule Export Custom Separator
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'CSV-Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = () => {
let exportValues = { exportType: 'csv', separator: ';' };
scheduleObj.current.exportToExcel(exportValues);
}
return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj} selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule Export Custom Separator
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'CSV-Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
const onExportClick = (): void => {
let exportValues: ExportOptions = { exportType: 'csv', separator: ';' };
scheduleObj.current.exportToExcel(exportValues);
}
return (
<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={scheduleObj}
selectedDate={new Date(2019, 0, 10)} eventSettings={eventSettings}
actionBegin={onActionBegin}>
<ViewsDirective>
<ViewDirective option='Week' />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>How to customize the excel sheet on before exporting
Customizing an Excel sheet before export is made easy with the excelExport event. This event provides users with robust flexibility to tailor the exported data, format it according to specific needs, and include additional elements for enhanced presentation.
With the excelExport event, you can:
-
Adjust the formatting: Apply specific styles such as font type, size, color, and cell formatting to make the output visually appealing and consistent with your requirements.
-
Customize headers and footers: Personalize the Excel sheet by modifying the header and footer content, offering more control over the exported document.
-
Cancel the export: The event supports cancellation of the export process by setting the
cancelproperty totrue. This feature ensures you can prevent export based on specific conditions, offering you full control over the Excel export workflow.
Here’s an example of how you can add a custom header and footer to an Excel sheet before exporting using the excelExport event.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule Export Custom Separator
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right',
showTextOn: 'Both',
prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export',
cssClass: 'e-excel-export',
click: onExportClick,
};
args.items.push(exportItem);
}
};
const onExportClick = () => {
const exportFields = [
{ name: 'Id', text: 'Id' },
{ name: 'Subject', text: 'Summary' },
{ name: 'StartTime', text: 'Start Date' },
{ name: 'EndTime', text: 'End Date' },
{ name: 'Location', text: 'Place' },
];
const exportValues = { fieldsInfo: exportFields };
scheduleObj.current.exportToExcel(exportValues, true);
};
const onExcelExport = (args) => {
const worksheet = args.worksheets[0];
worksheet.rows.unshift({
index: 1,
cells: [
{
index: 1,
value: 'Sales Report',
style: {
bold: true,
fontSize: 18,
hAlign: 'Center',
fill: { color: '#1E90FF' },
color: '#FFFFFF',
},
colSpan: worksheet.columns.length,
},
],
});
worksheet.rows.unshift({
index: 2,
cells: [
{
index: 1,
value: 'Generated on: ' + new Date().toLocaleDateString(),
style: {
italic: true,
fontSize: 12,
hAlign: 'Left',
fill: { color: '#D3D3D3' },
},
colSpan: worksheet.columns.length,
},
],
});
worksheet.rows.forEach((row, idx) => {
row.index = idx + 1;
});
worksheet.rows.push({
index: worksheet.rows.length + 1,
cells: [
{
index: 1,
value: 'End of Report',
style: {
bold: true,
fontSize: 14,
hAlign: 'Center',
fill: { color: '#FFD700' },
},
colSpan: worksheet.columns.length,
},
],
});
};
return (
<ScheduleComponent
cssClass="excel-export"
width="100%"
height="550px"
id="schedule"
ref={scheduleObj}
selectedDate={new Date(2025, 0, 10)}
eventSettings={eventSettings}
actionBegin={onActionBegin}
excelExport={onExcelExport}
>
<ViewsDirective>
<ViewDirective option="Week" />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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 { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective, EventSettingsModel, ExcelExportEventArgs, ExportFieldInfo
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
* Schedule Export Custom Separator
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right',
showTextOn: 'Both',
prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export',
cssClass: 'e-excel-export',
click: onExportClick,
};
args.items.push(exportItem);
}
};
const onExportClick = (): void => {
const exportFields: ExportFieldInfo[] = [
{ name: 'Id', text: 'Id' },
{ name: 'Subject', text: 'Summary' },
{ name: 'StartTime', text: 'Start Date' },
{ name: 'EndTime', text: 'End Date' },
{ name: 'Location', text: 'Place' },
];
const exportValues: ExportOptions = { fieldsInfo: exportFields };
scheduleObj.current.exportToExcel(exportValues, true);
};
const onExcelExport = (args: ExcelExportEventArgs) => {
const worksheet = args.worksheets[0];
worksheet.rows.unshift({
index: 1,
cells: [
{
index: 1,
value: 'Sales Report',
style: {
bold: true,
fontSize: 18,
hAlign: 'Center',
fill: { color: '#1E90FF' },
color: '#FFFFFF',
},
colSpan: worksheet.columns.length,
},
],
});
worksheet.rows.unshift({
index: 2,
cells: [
{
index: 1,
value: 'Generated on: ' + new Date().toLocaleDateString(),
style: {
italic: true,
fontSize: 12,
hAlign: 'Left',
fill: { color: '#D3D3D3' },
},
colSpan: worksheet.columns.length,
},
],
});
worksheet.rows.forEach((row: any, idx: number) => {
row.index = idx + 1;
});
worksheet.rows.push({
index: worksheet.rows.length + 1,
cells: [
{
index: 1,
value: 'End of Report',
style: {
bold: true,
fontSize: 14,
hAlign: 'Center',
fill: { color: '#FFD700' },
},
colSpan: worksheet.columns.length,
},
],
});
};
return (
<ScheduleComponent
cssClass="excel-export"
width="100%"
height="550px"
id="schedule"
ref={scheduleObj}
selectedDate={new Date(2025, 0, 10)}
eventSettings={eventSettings}
actionBegin={onActionBegin}
excelExport={onExcelExport}
>
<ViewsDirective>
<ViewDirective option="Week" />
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
</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>/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today{
display: none !important;
}
/* csslint ignore:end */Exporting calendar events as ICS file
Export Scheduler events to a calendar (.ics) file format compatible with Google Calendar, Outlook, and other standard calendar applications.
Important: To export to ICS format, you must first import the
ICalendarExportmodule from the@syncfusion/ej2-schedulepackage and inject it using theSchedule.Inject(ICalendarExport)method.
The following code example shows how the Scheduler events are exported to a calendar (.ics) file by making use of the exportToICalendar public method.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onClick = () => {
scheduleObj.current.exportToICalendar();
}
return (<div>
<ButtonComponent id='ics-export' title='Export' onClick={onClick}>Export</ButtonComponent>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' id='schedule' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
</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 {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings = { dataSource: scheduleData };
const onClick = (): void => {
scheduleObj.current.exportToICalendar();
}
return (<div>
<ButtonComponent id='ics-export' title='Export' onClick={onClick}>Export</ButtonComponent>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' id='schedule' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
</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>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.e-schedule .e-schedule-toolbar .user-icon,
.e-profile-wrapper .profile-image {
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/nancy.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
}
/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .user-icon {
height: 24px;
min-width: 24px !important;
width: 24px !important;
}
/* csslint ignore:end */
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn:hover {
background-color: inherit;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn-text {
display: none;
}
/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .e-toolbar-pop .e-schedule-user-icon .e-tbar-btn-text {
padding-left: 8px !important;
}
/* csslint ignore:end */
.e-profile-wrapper {
width: 210px;
height: 80px;
background-color: #fafafa;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.e-profile-wrapper .profile-container {
display: flex;
padding: 10px;
}
.e-profile-wrapper .profile-image {
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
}
.e-profile-wrapper .content-wrap {
padding-left: 10px;
}
.e-profile-wrapper .name {
font-size: 14px;
line-height: 20px;
font-weight: 500;
margin-top: 2px;
}
.e-profile-wrapper .destination {
font-size: 12px;
}
.e-profile-wrapper .status-icon {
height: 6px;
width: 6px;
background: green;
border-radius: 100%;
float: left;
margin-right: 4px;
margin-top: 4px;
}
.e-profile-wrapper .status {
font-size: 11px;
}Exporting calendar with custom file name
By default, the calendar is exported with a file name Calendar.ics. To change this file name on export, pass the custom string value as fileName to the method argument so as to get the file downloaded with this provided name.
The following example downloads the iCal file with a name ScheduleEvents.ics.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onClick = () => {
scheduleObj.current.exportToICalendar('ScheduleEvents');
}
return (<div>
<ButtonComponent id='ics-export' title='Export' onClick={onClick}>Export</ButtonComponent>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' id='schedule' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
</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 {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';
/**
* Schedule header customization sample
*/
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings = { dataSource: scheduleData };
const onClick = (): void => {
scheduleObj.current.exportToICalendar('ScheduleEvents');
}
return (<div>
<ButtonComponent id='ics-export' title='Export' onClick={onClick}>Export</ButtonComponent>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' id='schedule' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
</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>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.e-schedule .e-schedule-toolbar .user-icon,
.e-profile-wrapper .profile-image {
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/nancy.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
}
/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .user-icon {
height: 24px;
min-width: 24px !important;
width: 24px !important;
}
/* csslint ignore:end */
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn:hover {
background-color: inherit;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-schedule-user-icon .e-tbar-btn-text {
display: none;
}
/* csslint ignore:start */
.e-schedule .e-schedule-toolbar .e-toolbar-pop .e-schedule-user-icon .e-tbar-btn-text {
padding-left: 8px !important;
}
/* csslint ignore:end */
.e-profile-wrapper {
width: 210px;
height: 80px;
background-color: #fafafa;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.e-profile-wrapper .profile-container {
display: flex;
padding: 10px;
}
.e-profile-wrapper .profile-image {
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
}
.e-profile-wrapper .content-wrap {
padding-left: 10px;
}
.e-profile-wrapper .name {
font-size: 14px;
line-height: 20px;
font-weight: 500;
margin-top: 2px;
}
.e-profile-wrapper .destination {
font-size: 12px;
}
.e-profile-wrapper .status-icon {
height: 6px;
width: 6px;
background: green;
border-radius: 100%;
float: left;
margin-right: 4px;
margin-top: 4px;
}
.e-profile-wrapper .status {
font-size: 11px;
}Import events from other calendars
Import events from external calendar files (.ics format) into the Scheduler using the importICalendar method.
Important: To import ICS files, you must first import the
ICalendarImportmodule from the@syncfusion/ej2-schedulepackage and inject it using theSchedule.Inject(ICalendarImport)method. The method accepts ablob objectof the .ics file as a mandatory argument.
The following example shows how to import an ICS file into Scheduler, using the importICalendar method.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize, Inject, ICalendarExport, ICalendarImport
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
const App = () => {
const scheduleObj = useRef(null);
let multiple = false;
let showFileList = false;
const allowedExtensions = '.ics';
const eventSettings = { dataSource: scheduleData };
const onSelect = (args) => {
scheduleObj.current.importICalendar(args.event.target.files[0]);
}
return (<div>
<UploaderComponent id='fileUpload' type='file' allowedExtensions={allowedExtensions} cssClass='calendar-import'
buttons= multiple={multiple} showFileList={showFileList}
selected={onSelect}></UploaderComponent>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} allowDragAndDrop={false} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
</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 {
ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize, Inject, ICalendarExport, ICalendarImport
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
let multiple: boolean = false;
let showFileList: boolean = false;
const allowedExtensions: string = '.ics';
const eventSettings = { dataSource: scheduleData };
const onSelect = (args): void => {
scheduleObj.current.importICalendar(args.event.target.files[0]);
}
return (<div>
<UploaderComponent id='fileUpload' type='file' allowedExtensions={allowedExtensions} cssClass='calendar-import'
buttons= multiple={multiple} showFileList={showFileList}
selected={onSelect}></UploaderComponent>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} allowDragAndDrop={false} eventSettings={eventSettings}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
</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>/* csslint ignore:start */
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.calendar-import.e-upload {
border: 0;
padding-left: 0 !important;
}
.calendar-import.e-upload .e-file-select-wrap {
padding: 0
}
.calendar-import.e-upload .e-file-select-wrap .e-file-drop {
display: none;
}
/* csslint ignore:end */
.e-profile-wrapper {
width: 210px;
height: 80px;
background-color: #fafafa;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.e-profile-wrapper .profile-container {
display: flex;
padding: 10px;
}
.e-profile-wrapper .profile-image {
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
}
.e-profile-wrapper .content-wrap {
padding-left: 10px;
}
.e-profile-wrapper .name {
font-size: 14px;
line-height: 20px;
font-weight: 500;
margin-top: 2px;
}
.e-profile-wrapper .destination {
font-size: 12px;
}
.e-profile-wrapper .status-icon {
height: 6px;
width: 6px;
background: green;
border-radius: 100%;
float: left;
margin-right: 4px;
margin-top: 4px;
}
.e-profile-wrapper .status {
font-size: 11px;
}
/* csslint ignore:end */How to print the Scheduler element
Print the Scheduler using the print client-side method. The method supports two approaches:
- Print without options - Print the current view with default settings
- Print with options - Print with customized layout and preferences
Important: To enable printing, you must import the
@syncfusion/ej2-react-schedulepackage and inject it using<Inject services={[Print]} />.
Using print method without options
Print the Scheduler with the current view using the print method without passing any options. This approach uses default print settings and prints all visible data in the current view.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(exportItem);
}
}
const onPrintIconClick = () => {
scheduleObj.current.print();
}
return (<div>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</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 { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, EventSettingsModel, Print, Inject, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(exportItem);
}
}
const onPrintIconClick = (): void => {
scheduleObj.current.print();
}
return (<div>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</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>Using a print method with options
Customize the print output by passing options to the print method. This allows you to control which data is printed, customize the layout, and tailor the output to your specific needs.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const App = () => {
const scheduleObj = useRef(null);
const eventSettings = { dataSource: scheduleData };
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(exportItem);
}
}
const onPrintIconClick = () => {
let printModel = {
agendaDaysCount: 14,
cssClass: 'e-print-schedule',
currentView: scheduleObj.current.currentView,
dateFormat: 'dd-MMM-yyyy',
enableRtl: false,
endHour: '18:00',
firstDayOfWeek: 1,
firstMonthOfYear: 0,
group: {},
height: 'auto',
locale: scheduleObj.current.locale,
maxDate: scheduleObj.current.selectedDate,
minDate: scheduleObj.current.getCurrentViewDates()[0],
readonly: true,
resources: [],
rowAutoHeight: false,
selectedDate: new Date(),
showHeaderBar: false,
showTimeIndicator: false,
showWeekNumber: false,
showWeekend: false,
startHour: '06:00',
timeFormat: 'HH',
timeScale: { enable: true },
width: 'auto',
workDays: [1, 2, 3, 4, 5],
workHours: { highlight: true, start: '10:00', end: '20:00' }
};
scheduleObj.current.print(printModel);
}
return (
<div>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</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 { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, EventSettingsModel, Inject, ScheduleModel, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
const App = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const eventSettings: EventSettingsModel = { dataSource: scheduleData };
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs): void => {
if (args.requestType === 'toolbarItemRendering') {
let exportItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(exportItem);
}
}
const onPrintIconClick = (): void => {
let printModel: ScheduleModel = {
agendaDaysCount: 14,
cssClass: 'e-print-schedule',
currentView: scheduleObj.current.currentView,
dateFormat: 'dd-MMM-yyyy',
enableRtl: false,
endHour: '18:00',
firstDayOfWeek: 1,
firstMonthOfYear: 0,
group: {},
height: 'auto',
locale: scheduleObj.current.locale,
maxDate: scheduleObj.current.selectedDate,
minDate: scheduleObj.current.getCurrentViewDates()[0],
readonly: true,
resources: [],
rowAutoHeight: false,
selectedDate: new Date(),
showHeaderBar: false,
showTimeIndicator: false,
showWeekNumber: false,
showWeekend: false,
startHour: '06:00',
timeFormat: 'HH',
timeScale: { enable: true },
width: 'auto',
workDays: [1, 2, 3, 4, 5],
workHours: { highlight: true, start: '10:00', end: '20:00' }
};
scheduleObj.current.print(printModel);
}
return (
<div>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={eventSettings} actionBegin={onActionBegin}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</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 customize the print layout
Use the beforePrint event to customize the print layout without affecting the actual Scheduler layout or data. This event provides the HTML element used for printing, allowing you to tailor it before the print operation.
Key customization options:
- Header and footer - Add custom content (company name, date, page numbers, etc.)
- Layout control - Fine-tune content to ensure clean, structured output
-
Print cancellation - Set
canceltotrueto prevent printing based on conditions
Tip: The
beforePrintevent gives you full control over the print operation. You can modify the HTML, add branding, or cancel the print action entirely.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useRef } from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
const getCurrentUserInfo = () => ({ department: 'Sales', userRole: 'Manager' });
const getDepartmentColor = (dept) => {
const colors = {
Sales: '#4CAF50',
Marketing: '#2196F3',
Engineering: '#FF9800',
HR: '#9C27B0',
};
return colors[dept] || '#607D8B';
};
const App = () => {
const scheduleObj = useRef(null);
const { department, userRole } = getCurrentUserInfo();
const onActionBegin = (args) => {
if (args.requestType === 'toolbarItemRendering') {
let printItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(printItem);
}
}
const onPrintIconClick = () => {
scheduleObj.current.print();
}
const onBeforePrint = (args) => {
const headerElement = document.createElement('div');
headerElement.innerHTML = `
<h1>${department} Department Schedule</h1>
<p>Printed by: ${userRole}</p>
<p>Date: ${new Date().toLocaleString()}</p>
`;
headerElement.style.backgroundColor = getDepartmentColor(department);
headerElement.style.color = 'white';
headerElement.style.padding = '10px';
args.printElement.insertBefore(headerElement, args.printElement.firstChild);
const highPriorityEvents = args.printElement.querySelectorAll('.e-appointment.high-priority');
highPriorityEvents.forEach(event => {
(event).style.border = '2px solid red';
});
const events = scheduleObj.current?.getEvents() || [];
const summaryElement = document.createElement('div');
summaryElement.innerHTML = `
<p>Total Events: ${events.length}</p>
<p>High Priority Events: ${events.filter(e => e.priority === 'high').length}</p>
`;
args.printElement.appendChild(summaryElement);
if (userRole === 'Manager') {
const managerNote = document.createElement('div');
managerNote.textContent = 'Confidential - For managerial use only';
managerNote.style.color = 'red';
args.printElement.appendChild(managerNote);
}
};
return (
<div>
<ScheduleComponent ref={scheduleObj} width='100%' height='520px' views={['Day', 'Week', 'WorkWeek', 'Month']} dataSource={scheduleData} selectedDate={new Date(2025, 1, 15)} eventSettings={eventSettings} actionBegin={onActionBegin} beforePrint={onBeforePrint}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</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 { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject, ActionEventArgs, ToolbarActionArgs, BeforePrintEventArgs} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
const getCurrentUserInfo = () => ({ department: 'Sales', userRole: 'Manager' });
const getDepartmentColor = (dept: string): string => {
const colors: Record<string, string> = {
Sales: '#4CAF50',
Marketing: '#2196F3',
Engineering: '#FF9800',
HR: '#9C27B0',
};
return colors[dept] || '#607D8B';
};
const App: React.FC = () => {
const scheduleObj = useRef<ScheduleComponent>(null);
const { department, userRole } = getCurrentUserInfo();
const onActionBegin = (args: ActionEventArgs & ToolbarActionArgs) => {
if (args.requestType === 'toolbarItemRendering') {
let printItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(printItem);
}
};
const onPrintIconClick = () => {
scheduleObj.current.print();
};
const onBeforePrint = (args: BeforePrintEventArgs) => {
const headerElement = document.createElement('div');
headerElement.innerHTML = `
<h1>${department} Department Schedule</h1>
<p>Printed by: ${userRole}</p>
<p>Date: ${new Date().toLocaleString()}</p>
`;
headerElement.style.backgroundColor = getDepartmentColor(department);
headerElement.style.color = 'white';
headerElement.style.padding = '10px';
args.printElement.insertBefore(headerElement, args.printElement.firstChild);
const highPriorityEvents = args.printElement.querySelectorAll('.e-appointment.high-priority');
highPriorityEvents.forEach(event => {
(event as HTMLElement).style.border = '2px solid red';
});
const events = scheduleObj.current?.getEvents() || [];
const summaryElement = document.createElement('div');
summaryElement.innerHTML = `
<p>Total Events: ${events.length}</p>
<p>High Priority Events: ${events.filter(e => e.priority === 'high').length}</p>
`;
args.printElement.appendChild(summaryElement);
if (userRole === 'Manager') {
const managerNote = document.createElement('div');
managerNote.textContent = 'Confidential - For managerial use only';
managerNote.style.color = 'red';
args.printElement.appendChild(managerNote);
}
};
return (
<ScheduleComponent
ref={scheduleObj}
width="100%"
height="550px"
selectedDate={new Date()}
eventSettings=
views={['Day', 'Week', 'WorkWeek', 'Month']}
actionBegin={onActionBegin}
beforePrint={onBeforePrint}
>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</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>