React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Exporting in React Schedule component

11 Jan 2022 / 16 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 look onto the ways on how to implement the exporting functionality in Scheduler.

Excel Exporting

The Scheduler allows you to export all its events into 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 you start with excel exporting functionality, you need to import and inject the ExcelExport module from the ‘@syncfusion/ej2-schedule’ package using the Inject method of Scheduler.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
  ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
  ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
    if (args.requestType === 'toolbarItemRendering') {
      let exportItem: ItemModel = {
        align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
        text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
      };
      args.items.push(exportItem);
    }
  }

  private onExportClick(): void {
    this.scheduleObj.exportToExcel();
  }

  render() {
    return (
            <ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t}
              selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }}
              actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week' />
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
            </ScheduleComponent>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />    
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
                text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onExportClick() {
        this.scheduleObj.exportToExcel();
    }
    render() {
        return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week'/>
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]}/>
            </ScheduleComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

Exporting with custom fields

By default, Scheduler exports all the default event fields that are mapped to it through the eventSettings property. To limit the number of fields on the exported excel file, it provides an option to export only the custom fields of the event data. To export such custom fields alone, define the required fields through the ExportOptions interface and pass it as argument to the exportToExcel method as shown in the following example. For example: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'].

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
  ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
  ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
    if (args.requestType === 'toolbarItemRendering') {
      let exportItem: ItemModel = {
        align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
        text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
      };
      args.items.push(exportItem);
    }
  }

  private onExportClick(): void {
    let exportValues: ExportOptions = {
      fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
    };
    this.scheduleObj.exportToExcel(exportValues);
  }

  render() {
    return (
            <ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t}
              selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }}
              actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week' />
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
            </ScheduleComponent>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />    
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
                text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onExportClick() {
        let exportValues = {
            fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
        };
        this.scheduleObj.exportToExcel(exportValues);
    }
    render() {
        return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week'/>
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]}/>
            </ScheduleComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

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.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
  ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
  ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
    if (args.requestType === 'toolbarItemRendering') {
      let exportItem: ItemModel = {
        align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
        text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
      };
      args.items.push(exportItem);
    }
  }

  private onExportClick(): void {
    let exportValues: ExportOptions = { includeOccurrences: true };
    this.scheduleObj.exportToExcel(exportValues);
  }

  render() {
    return (
            <ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t}
              selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }}
              actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week' />
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
            </ScheduleComponent>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />    
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
                text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onExportClick() {
        let exportValues = { includeOccurrences: true };
        this.scheduleObj.exportToExcel(exportValues);
    }
    render() {
        return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week'/>
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]}/>
            </ScheduleComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

Exporting custom event data

By default, the whole event collection bound to the Scheduler gets exported as an excel file. To export only specific events of Scheduler or some custom event collection, you need to pass those custom data collection as a parameter to the exportToExcel method as shown in this following example, through the customData option of ExportOptions interface.

By default, the event data are taken from Scheduler dataSource.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
  ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
  ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
    if (args.requestType === 'toolbarItemRendering') {
      let exportItem: ItemModel = {
        align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
        text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
      };
      args.items.push(exportItem);
    }
  }

  private 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'
        }]
     };
    this.scheduleObj.exportToExcel(exportValues);
  }

  render() {
    return (
            <ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t}
              selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }}
              actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week' />
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
            </ScheduleComponent>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />    
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
                text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onExportClick() {
        let exportValues = {
            customData: [{
                    Id: 1,
                    Subject: 'Explosion of Betelgeuse Star',
                    Location: 'Space Centre USA',
                    StartTime: new Date(2019, 0, 6, 9, 30),
                    EndTime: new Date(2019, 0, 6, 11, 0),
                    CategoryColor: '#1aaa55'
                }, {
                    Id: 2,
                    Subject: 'Thule Air Crash Report',
                    Location: 'Newyork City',
                    StartTime: new Date(2019, 0, 7, 12, 0),
                    EndTime: new Date(2019, 0, 7, 14, 0),
                    CategoryColor: '#357cd2'
                }]
        };
        this.scheduleObj.exportToExcel(exportValues);
    }
    render() {
        return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week'/>
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]}/>
            </ScheduleComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

Customizing column header with custom fields exporting

Using fields property, we can only export the defined fields into excel without customizing the header. Now we can provide the alternate support to customize the header of custom fields exporting using the fieldsInfo option through the ExportFieldInfo interface and pass it as an argument to the exportToExcel method as shown in the following example.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
  ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions, ExportFieldInfo,
  ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
    if (args.requestType === 'toolbarItemRendering') {
      let exportItem: ItemModel = {
        align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
        text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
      };
      args.items.push(exportItem);
    }
  }

  private onExportClick(): void {
    let customFields: ExportFieldInfo[] = [
        { name: 'Subject', text: 'Summary' },
        { name: 'StartTime', text: 'First Date' },
        { name: 'EndTime', text: 'Last Date' },
        { name: 'Location', text: 'Place' },
        { name: 'OwnerId', text: 'Owners' }
    ];
    let exportValues: ExportOptions = { fieldsInfo: customFields };
    this.scheduleObj.exportToExcel(exportValues);
  }

  render() {
    return (
            <ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t}
              selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }}
              actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week' />
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
            </ScheduleComponent>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />    
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
                text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onExportClick() {
        let customFields = [
            { name: 'Subject', text: 'Summary' },
            { name: 'StartTime', text: 'First Date' },
            { name: 'EndTime', text: 'Last Date' },
            { name: 'Location', text: 'Place' },
            { name: 'OwnerId', text: 'Owners' }
        ];
        let exportValues = { fieldsInfo: customFields };
        this.scheduleObj.exportToExcel(exportValues);
    }
    render() {
        return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week'/>
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]}/>
            </ScheduleComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

Export with custom file name

By default, the Scheduler allows you to download the exported Excel file with a name Schedule.xlsx. It also provides an option to export the excel file with a custom file name, by defining the desired fileName through the ExportOptions interface and passing it as an argument to the exportToExcel method.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
  ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
  ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
    if (args.requestType === 'toolbarItemRendering') {
      let exportItem: ItemModel = {
        align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
        text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
      };
      args.items.push(exportItem);
    }
  }

  private onExportClick(): void {
    let exportValues: ExportOptions = { fileName: "SchedulerData" };
    this.scheduleObj.exportToExcel(exportValues);
  }

  render() {
    return (
            <ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t}
              selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }}
              actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week' />
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
            </ScheduleComponent>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />    
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
                text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onExportClick() {
        let exportValues = { fileName: "SchedulerData" };
        this.scheduleObj.exportToExcel(exportValues);
    }
    render() {
        return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week'/>
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]}/>
            </ScheduleComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

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 of the file type such as .xlsx or csv formats, by defining the exportType option as either csv or xlsx through the ExportOptions interface. By default, the exportType is set to xlsx.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ItemModel } from '@syncfusion/ej2-react-navigations';
import {
  ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, ExportOptions,
  ActionEventArgs, ToolbarActionArgs, DragAndDrop, Inject, ViewsDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
    if (args.requestType === 'toolbarItemRendering') {
      let exportItem: ItemModel = {
        align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
        text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
      };
      args.items.push(exportItem);
    }
  }

  private onExportClick(): void {
    let exportValues: ExportOptions = { exportType: "csv" };
    this.scheduleObj.exportToExcel(exportValues);
  }

  render() {
    return (
            <ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t}
              selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }}
              actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week' />
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]} />
            </ScheduleComponent>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />    
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, Week, Resize, ExcelExport, DragAndDrop, Inject, ViewsDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
                text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onExportClick() {
        let exportValues = { exportType: "csv" };
        this.scheduleObj.exportToExcel(exportValues);
    }
    render() {
        return (<ScheduleComponent cssClass='excel-export' width='100%' height='550px' id='schedule' ref={t => this.scheduleObj = t} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
              <ViewsDirective>
                <ViewDirective option='Week'/>
              </ViewsDirective>
              <Inject services={[Week, Resize, DragAndDrop, ExcelExport]}/>
            </ScheduleComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

Exporting calendar events as ICS file

You can export the Scheduler events to a calendar (.ics) file format, and open it on any of the other default calendars such as Google or Outlook. To export the events of Scheduler to an ICS file, you need to first import the ICalendarExport module from @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.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onClick(): void {
    this.scheduleObj.exportToICalendar();
  }

  render() {
    return ( <div>
            <ButtonComponent id='ics-export' title='Export' onClick={this.onClick.bind(this)}>Export</ButtonComponent>
            <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' id='schedule' selectedDate= {new Date(2018, 1, 15)} eventSettings={ { dataSource: this.data } }>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
              </ScheduleComponent></div>
          );
      }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onClick() {
        this.scheduleObj.exportToICalendar();
    }
    render() {
        return (<div>
            <ButtonComponent id='ics-export' title='Export' onClick={this.onClick.bind(this)}>Export</ButtonComponent>
            <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' id='schedule' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data }}>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]}/>
              </ScheduleComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

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.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject
} from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';

/**
 *  Schedule header customization sample
 */

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onClick(): void {
    this.scheduleObj.exportToICalendar('ScheduleEvents');
  }

  render() {
    return ( <div>
            <ButtonComponent id='ics-export' title='Export' onClick={this.onClick.bind(this)}>Export</ButtonComponent>
            <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' id='schedule' selectedDate= {new Date(2018, 1, 15)} eventSettings={ { dataSource: this.data } }>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
              </ScheduleComponent></div>
          );
      }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, Inject } from '@syncfusion/ej2-react-schedule';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { scheduleData } from './datasource';
/**
 *  Schedule header customization sample
 */
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onClick() {
        this.scheduleObj.exportToICalendar('ScheduleEvents');
    }
    render() {
        return (<div>
            <ButtonComponent id='ics-export' title='Export' onClick={this.onClick.bind(this)}>Export</ButtonComponent>
            <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' id='schedule' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data }}>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]}/>
              </ScheduleComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

Import events from other calendars

The events from external calendars (ICS files) can be imported into Scheduler by 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, you need to first import the ICalendarImport module from @syncfusion/ej2-schedule package and then inject it using the Schedule.Inject(ICalendarImport) method.

The following example shows how to import an ICS file into Scheduler, using the importICalendar method.

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize, Inject, ICalendarExport, ICalendarImport
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';

class App extends React.Component<{}, {}>{
    public scheduleObj: ScheduleComponent;
    private multiple: boolean = false;
    private showFileList: boolean = false;
    private allowedExtensions: string = '.ics';
    private data: Object[] = extend([], scheduleData, null, true) as Object[];

    private onSelect(args): void {
    this.scheduleObj.importICalendar(args.event.target.files[0]);
    }

    render() {
    return (<div>
    <UploaderComponent id='fileUpload' type='file' allowedExtensions={this.allowedExtensions} cssClass='calendar-import'
    buttons={{ browse: 'Choose file' }} multiple={this.multiple} showFileList={this.showFileList}
    selected={this.onSelect.bind(this)}></UploaderComponent>
    <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' selectedDate= {new Date(2018, 1, 15)} allowDragAndDrop= {false} eventSettings={ { dataSource: this.data } }>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]} />
    </ScheduleComponent></div>
    );
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize, Inject, ICalendarExport, ICalendarImport } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.multiple = false;
        this.showFileList = false;
        this.allowedExtensions = '.ics';
        this.data = extend([], scheduleData, null, true);
    }
    onSelect(args) {
        this.scheduleObj.importICalendar(args.event.target.files[0]);
    }
    render() {
        return (<div>
    <UploaderComponent id='fileUpload' type='file' allowedExtensions={this.allowedExtensions} cssClass='calendar-import' buttons={{ browse: 'Choose file' }} multiple={this.multiple} showFileList={this.showFileList} selected={this.onSelect.bind(this)}></UploaderComponent>
    <ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} allowDragAndDrop={false} eventSettings={{ dataSource: this.data }}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, DragAndDrop, ICalendarExport, ICalendarImport, Resize, DragAndDrop]}/>
    </ScheduleComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));

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 Print module from the @syncfusion/ej2-react-schedule package and then inject it using <Inject services={[Print]} />.

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.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
                text: 'Print', cssClass: 'e-schedule-print', click: this.onPrintIconClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onPrintIconClick() {
        this.scheduleObj.print();
    }
    render() {
        return (<div>
<ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]}/>
</ScheduleComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
if (args.requestType === 'toolbarItemRendering') {
  let exportItem: ItemModel = {
    align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
    text: 'Print', cssClass: 'e-schedule-print', click: this.onPrintIconClick.bind(this)
  };
  args.items.push(exportItem);
}
  }

  private onPrintIconClick(): void {
this.scheduleObj.print();
  }

render() {
return (<div>
<ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={ { dataSource: this.data } } actionBegin={this.onActionBegin.bind(this)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</ScheduleComponent></div>
);
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

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.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
    }
    onActionBegin(args) {
        if (args.requestType === 'toolbarItemRendering') {
            let exportItem = {
                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
                text: 'Print', cssClass: 'e-schedule-print', click: this.onPrintIconClick.bind(this)
            };
            args.items.push(exportItem);
        }
    }
    onPrintIconClick() {
        let printModel = {
            agendaDaysCount: 14,
            cssClass: 'e-print-schedule',
            currentView: this.scheduleObj.currentView,
            dateFormat: 'dd-MMM-yyyy',
            enableRtl: false,
            endHour: '18:00',
            firstDayOfWeek: 1,
            firstMonthOfYear: 0,
            group: {},
            height: 'auto',
            locale: this.scheduleObj.locale,
            maxDate: this.scheduleObj.selectedDate,
            minDate: this.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' }
        };
        this.scheduleObj.print(printModel);
    }
    render() {
        return (<div>
<ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={{ dataSource: this.data }} actionBegin={this.onActionBegin.bind(this)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]}/>
</ScheduleComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Print, Inject, ScheduleModel } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}>{
  public scheduleObj: ScheduleComponent;
  private data: Object[] = extend([], scheduleData, null, true) as Object[];

  private onActionBegin(args: ActionEventArgs & ToolbarActionArgs): void {
if (args.requestType === 'toolbarItemRendering') {
  let exportItem: ItemModel = {
    align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
    text: 'Print', cssClass: 'e-schedule-print', click: this.onPrintIconClick.bind(this)
  };
  args.items.push(exportItem);
}
  }

  private onPrintIconClick(): void {
let printModel: ScheduleModel = {
  agendaDaysCount: 14,
  cssClass: 'e-print-schedule',
  currentView: this.scheduleObj.currentView,
  dateFormat: 'dd-MMM-yyyy',
  enableRtl: false,
  endHour: '18:00',
  firstDayOfWeek: 1,
  firstMonthOfYear: 0,
  group: {},
  height: 'auto',
  locale: this.scheduleObj.locale,
  maxDate: this.scheduleObj.selectedDate,
  minDate: this.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' }
};
this.scheduleObj.print(printModel);
  }

render() {
return (<div>
<ScheduleComponent ref={schedule => this.scheduleObj = schedule} width='100%' height='520px' selectedDate={new Date(2018, 1, 15)} eventSettings={ { dataSource: this.data } } actionBegin={this.onActionBegin.bind(this)}>
<Inject services={[Day, Week, WorkWeek, Month, Agenda, Print]} />
</ScheduleComponent></div>
);
  }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

You can refer to our React Scheduler feature tour page for its groundbreaking feature representations. You can also explore our React Scheduler example to knows how to present and manipulate data.

Previous
Next