Contents
- Excel Exporting
- Exporting calendar events as ICS file
- Import events from other calendars
- How to print the Scheduler element
Having trouble getting help?
Contact Support
Contact Support
Exporting in EJ2 TypeScript Scheduler control
28 Mar 202524 minutes to read
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 explore how to implement the exporting functionality in Scheduler.
Excel Exporting
The Scheduler allows you to export all its events to an Excel format file by using the exportToExcel client-side method. By default, it exports all the default fields of Scheduler mapped through eventSettings property.
Before using the Excel exporting functionality, you need to import and inject the
ExcelExportmodule from the@syncfusion/ej2-schedulepackage using theInjectmethod of Scheduler.
import { Schedule, Week, ExcelExport, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Week, ExcelExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2019, 0, 10),
views: ['Week'],
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onExportClick(): void {
scheduleObj.exportToExcel();
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];Exporting with custom fields
By default, Scheduler exports all default event fields mapped through the eventSettings property. To limit the number of fields in the exported Excel file, you can export only custom fields of the event data. Define the required fields through the eventSettings interface and pass it as an argument to the exportToExcel method. For example: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'].
import { Schedule, Week, ExcelExport, ExportOptions, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Week, ExcelExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2019, 0, 10),
views: ['Week'],
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onExportClick(): void {
let exportValues: ExportOptions = { fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'] };
scheduleObj.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];Exporting individual occurrences of a recurring series
By default, the Scheduler exports recurring events as a single data by exporting only its parent record into the excel file. If you want to export each individual occurrences of a recurring series appointment as separate records in an Excel file, define the includeOccurrences option as true through the ExportOptions interface and pass it as argument to the exportToExcel method. By default, the includeOccurrences option is set to false.
import { Schedule, Week, ExcelExport, ExportOptions, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
Schedule.Inject(Week, ExcelExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2019, 0, 10),
views: ['Week'],
eventSettings: {
dataSource: [
{
Id: 1,
Subject: 'Daily Meeting',
Location: 'Conference Room',
StartTime: new Date(2019, 0, 7, 9, 0),
EndTime: new Date(2019, 0, 7, 10, 0),
CategoryColor: '#1aaa55',
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=5'
}
]
},
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onExportClick(): void {
let exportValues: ExportOptions = { includeOccurrences: true };
scheduleObj.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>Exporting custom event data
By default, the entire event collection bound to the Scheduler is exported as an Excel file. To export only specific events or a custom event collection, pass the custom data collection as a parameter to the exportToExcel method through the customData option of the ExportOptions interface.
By default, the event data is taken from the Scheduler dataSource.
import { Schedule, Week, ExcelExport, ExportOptions, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Week, ExcelExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2019, 0, 10),
views: ['Week'],
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
}
});
scheduleObj.appendTo('#Schedule');
function 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.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];Customizing column header with custom fields exporting
To customize the header of custom fields during export, use the fieldsInfo option through the ExportFieldInfo interface and pass it as an argument to the exportToExcel method.
import {
Schedule, Week, ExcelExport, ExportOptions, ExportFieldInfo, ActionEventArgs
} from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
Schedule.Inject(Week, ExcelExport);
const data: Record<string, any>[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 16, 9, 30),
EndTime: new Date(2018, 1, 16, 11, 0),
Location: 'Chennai',
OwnerId: 1
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
Location: 'Mumbai',
OwnerId: 2
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
Location: 'Mumbai',
OwnerId: 3
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
Location: 'Bangalore',
OwnerId: 1
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
Location: 'Chennai',
OwnerId: 2
}
];
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: 500,
selectedDate: new Date(2018, 1, 15),
views: [
{ option: 'Week' }
],
resources: [
{
field: 'OwnerId', title: 'Owner',
name: 'Owners',
dataSource: [
{ OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerColor: '#7499e1' }
],
textField: 'OwnerText', idField: 'Id', colorField: 'OwnerColor'
}
],
eventSettings: { dataSource: data },
actionBegin: (args: ActionEventArgs) => {
if (args.requestType === 'toolbarItemRendering') {
const 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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onExportClick(): void {
const customFields: ExportFieldInfo[] = [
{ name: 'Subject', text: 'Summary' },
{ name: 'StartTime', text: 'First Date' },
{ name: 'EndTime', text: 'Last Date' },
{ name: 'Location', text: 'Place' },
{ name: 'OwnerId', text: 'Owners' }
];
const exportValues: ExportOptions = { fieldsInfo: customFields };
scheduleObj.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>Export with custom file name
By default, the Scheduler downloads the exported Excel file with the name Schedule.xlsx. To export the Excel file with a custom file name, define the desired fileName through the ExportOptions interface and pass it as an argument to the exportToExcel method.
import { Schedule, Week, ExcelExport, ExportOptions, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Week, ExcelExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2019, 0, 10),
views: ['Week'],
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onExportClick(): void {
let exportValues: ExportOptions = { fileName: "SchedulerData" };
scheduleObj.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];Excel file formats
By default, the Scheduler exports event data to an Excel file in the .xlsx format. You can also export the Scheduler data in either .xlsx or .csv formats by defining the exportType option as either csv or xlsx through the ExportOptions interface. The default exportType is xlsx.
import { Schedule, Week, ExcelExport, ExportOptions, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Week, ExcelExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2019, 0, 10),
views: ['Week'],
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onExportClick(): void {
let exportValues: ExportOptions = { exportType: "csv" };
scheduleObj.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];Custom separator in CSV
The Scheduler exports the event data to CSV format with , as separator. You can change separator by setting separator property in ExportOptions.
import { Schedule, Week, ExcelExport, ExportOptions, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
Schedule.Inject(Week, ExcelExport);
const data: object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2023, 0, 8, 9, 30),
EndTime: new Date(2023, 0, 8, 11, 0),
Location: 'Chennai',
OwnerId: 1
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2023, 0, 10, 12, 0),
EndTime: new Date(2023, 0, 10, 14, 0),
Location: 'Mumbai',
OwnerId: 2
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2023, 0, 13, 9, 30),
EndTime: new Date(2023, 0, 13, 11, 0),
Location: 'Mumbai',
OwnerId: 3
}
];
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2023, 0, 10),
views: ['Week'],
eventSettings: { dataSource: data },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onExportClick(): void {
let exportValues: ExportOptions = { exportType: 'csv', separator: ';' };
scheduleObj.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></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 { Schedule, Week, Month, ExcelExport, ExportOptions, ExcelExportEventArgs, ToolbarActionArgs, ActionEventArgs, ExportFieldInfo } from '@syncfusion/ej2-schedule';
import { ItemModel } from '@syncfusion/ej2-navigations';
Schedule.Inject(Week, ExcelExport, Month);
const data: object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2025, 0, 8, 9, 30),
EndTime: new Date(2025, 0, 8, 11, 0),
Location: 'Chennai',
OwnerId: 1
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2025, 0, 10, 12, 0),
EndTime: new Date(2025, 0, 10, 14, 0),
Location: 'Mumbai',
OwnerId: 2
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2025, 0, 13, 9, 30),
EndTime: new Date(2025, 0, 13, 11, 0),
Location: 'Mumbai',
OwnerId: 3
}
];
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(),
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
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);
}
},
excelExport: function (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,
},
],
});
},
eventSettings: { dataSource: data },
views: ['Day', 'Week', 'WorkWeek', 'Month']
});
scheduleObj.appendTo('#Schedule');
function 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.exportToExcel(exportValues);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>Exporting calendar events as ICS file
You can export Scheduler events to a calendar (.ics) file format, which can be opened in other default calendars such as Google or Outlook. To export Scheduler events to an ICS file, first import the ICalendarExport module from the @syncfusion/ej2-schedule package and then inject it using the Schedule.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 { Button } from '@syncfusion/ej2-buttons';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, ICalendarExport } from
'@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, ICalendarExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '520px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
let buttonObj: Button = new Button();
buttonObj.appendTo('#ics-export');
buttonObj.element.onclick = () => scheduleObj.exportToICalendar();<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<input id="ics-export" type="button" value="Export" />
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];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 { Button } from '@syncfusion/ej2-buttons';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, ICalendarExport } from
'@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, ICalendarExport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '520px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
let buttonObj: Button = new Button();
buttonObj.appendTo('#ics-export');
buttonObj.element.onclick = () => scheduleObj.exportToICalendar('ScheduleEvents');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<input id="ics-export" type="button" value="Export" />
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];Import events from other calendars
Events from external calendars (ICS files) can be imported into Scheduler using the importICalendar method. This method accepts the blob object of an .ics file to be imported as a mandatory argument.
To import an ICS file containing events into Scheduler, first import the
ICalendarImportmodule from the@syncfusion/ej2-schedulepackage and then inject it using theSchedule.Inject(ICalendarImport)method.
The following example shows how to import an ICS file into Scheduler, using the importICalendar method.
import { Uploader, SelectedEventArgs } from '@syncfusion/ej2-inputs';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, ICalendarImport } from
'@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, ICalendarImport);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '520px',
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
// Initialize Uploder component for import
let uploadObj: Uploader = new Uploader({
allowedExtensions: '.ics',
cssClass: 'calendar-import',
buttons: { browse: 'Choose file' },
multiple: false,
showFileList: false,
selected: (args: SelectedEventArgs) => scheduleObj.importICalendar((<HTMLInputElement>args.event.target).files[0])
});
uploadObj.appendTo('#ics-import');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<input id="ics-import" type="file" />
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];How to print the Scheduler element
The Scheduler allows you to print the Scheduler element by using the print client-side method. The print method works in two ways. You can find it below.
- Using print method without options.
- Using a print method with options.
To print the Schedule, you need to import the
@syncfusion/ej2-schedulepackage and then inject it using theSchedule.Inject(Print)method.
Using print method without options
You can print the Schedule element with the current view by using the print method without passing the options. The following example shows how to print the Scheduler using the print method without passing options.
import { ItemModel } from '@syncfusion/ej2-navigations';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, ActionEventArgs, ToolbarActionArgs, Print } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Print);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '520px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
if (args.requestType === 'toolbarItemRendering') {
let printItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(printItem);
}
}
});
scheduleObj.appendTo('#Schedule');
function onPrintIconClick(): void {
scheduleObj.print();
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
content: '\e813';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];Using a print method with options
You can print the Schedule element based on your needs using the print method by passing the print options used in this example with its values. The following example shows how to print the Scheduler using the print method by passing the options.
import { ItemModel } from '@syncfusion/ej2-navigations';
import { Schedule, Day, Week, WorkWeek, Month, Agenda, ActionEventArgs, ToolbarActionArgs, Print, ScheduleModel } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Print);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '520px',
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
if (args.requestType === 'toolbarItemRendering') {
let printItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(printItem);
}
}
});
scheduleObj.appendTo('#Schedule');
function onPrintIconClick(): void {
let printModel: ScheduleModel = {
agendaDaysCount: 14,
cssClass: 'e-print-schedule',
currentView: scheduleObj.currentView,
dateFormat: 'dd-MMM-yyyy',
enableRtl: false,
endHour: '18:00',
firstDayOfWeek: 1,
firstMonthOfYear: 0,
group: {},
height: 'auto',
locale: scheduleObj.locale,
maxDate: scheduleObj.selectedDate,
minDate: scheduleObj.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.print(printModel);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
content: '\e813';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];How to customize the print layout
The beforePrint event enables users to customize the print layout of the Scheduler control without altering the actual schedule layout or data. This event returns the HTML element used for printing, which can be tailored based on specific requirements before the print operation is triggered. Additionally, users can prevent the print action by setting the cancel property to true, giving them full control over when and how the print operation takes place.
Key customization options include:
- Customizing the header and footer: Add custom header and footer content of the print layout to include additional information.
- Controlling print output: Fine-tune the layout to ensure that only the necessary details are printed, ensuring a clean and structured printout.
Here’s an example of how you can add a custom header and footer to the print layout using the beforePrint event.
import { Schedule, Day, Week, WorkWeek, Month, Agenda, Print, BeforePrintEventArgs, ScheduleModel, ActionEventArgs, ToolbarActionArgs } from '@syncfusion/ej2-schedule';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ItemModel } from '@syncfusion/ej2-navigations';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Print);
const { department, userRole } = getCurrentUserInfo();
const dataManager: DataManager = new DataManager({
url: 'https://api.acmecorp.com/scheduleevents',
adaptor: new WebApiAdaptor(),
crossDomain: true
});
const scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(),
eventSettings: { dataSource: dataManager },
views: ['Day', 'Week', 'WorkWeek', 'Month'],
actionBegin: (args: ActionEventArgs & ToolbarActionArgs) => {
if (args.requestType === 'toolbarItemRendering') {
let printItem: ItemModel = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
};
args.items.push(printItem);
}
},
beforePrint: (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.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);
}
}
});
scheduleObj.appendTo('#Schedule');
function onPrintIconClick(): void {
scheduleObj.print();
}
function getDepartmentColor(dept: string): string {
const colors: Record<string, string> = {
'Sales': '#4CAF50',
'Marketing': '#2196F3',
'Engineering': '#FF9800',
'HR': '#9C27B0'
};
return colors[dept] || '#607D8B';
}
function getCurrentUserInfo() {
return { department: 'Sales', userRole: 'Manager' };
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
content: '\e813';
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2025, 1, 11, 9, 30),
EndTime: new Date(2025, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2025, 1, 12, 12, 0),
EndTime: new Date(2025, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2025, 1, 13, 9, 30),
EndTime: new Date(2025, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2025',
StartTime: new Date(2025, 1, 14, 13, 0),
EndTime: new Date(2025, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2025, 1, 15, 12, 0),
EndTime: new Date(2025, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2025, 1, 15, 9, 30),
EndTime: new Date(2025, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2025, 1, 16, 11, 0),
EndTime: new Date(2025, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2025, 1, 17, 9, 0),
EndTime: new Date(2025, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2025, 1, 19, 11, 0),
EndTime: new Date(2025, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2025, 1, 21, 11, 0),
EndTime: new Date(2025, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2025',
StartTime: new Date(2025, 1, 22, 9, 30),
EndTime: new Date(2025, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2025, 1, 9, 10, 0),
EndTime: new Date(2025, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2025, 1, 7, 10, 30),
EndTime: new Date(2025, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2025, 1, 5, 10, 0),
EndTime: new Date(2025, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2025, 1, 20, 9, 30),
EndTime: new Date(2025, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2025, 1, 23, 11, 0),
EndTime: new Date(2025, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2025, 1, 12, 5, 30),
EndTime: new Date(2025, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2025, 1, 12, 17, 0),
EndTime: new Date(2025, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2025, 1, 15, 6, 0),
EndTime: new Date(2025, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2025, 1, 15, 16, 0),
EndTime: new Date(2025, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to knows how to present and manipulate data.