Contents
Export
26 Mar 202524 minutes to read
Pdf export in React Gantt component
PDF export allows exporting Gantt data to PDF document. You need to use the pdfExport method for exporting. To enable PDF export in the Gantt, set the allowPdfExport to true.
To export data to PDF document, inject the PdfExport module in Gantt.
To get start quickly with PDF exporting and to know its functionalities, you can check on this video
Note: Currently, we do not have support for exporting manually scheduled tasks.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttChart;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport'];
function toolbarClick(args) {
if (args.item.text === 'Pdf export') {
ganttChart.pdfExport();
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowPdfExport={true} height='400px'
ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttChart: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Pdf export') {
ganttChart.pdfExport();
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowPdfExport={true} height='400px'
ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Indicators in PDF exporting
The PDF export functionality allows users to export Gantt charts enriched with dynamic indicators and accompanying images.
These indicators, represented by images,can be effortlessly defined using the base64 encoding value in the data object of datasource.This data object field should be mapped to indiactor property of task fields.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttChart;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
indicators: 'Indicators'
};
const toolbarOptions = ['PdfExport'];
function toolbarClick(args) {
if (args.item.text === 'Pdf export') {
ganttChart.pdfExport();
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowPdfExport={true} height='400px'
ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttChart: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
indicators: 'Indicators'
};
const toolbarOptions: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Pdf export') {
ganttChart.pdfExport();
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowPdfExport={true} height='400px'
ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Exporting Gantt data as a blob object
In Gantt, you can export the Gantt chart data as a blob object, which allows you to preview or modify the data before exporting it.
To export the Gantt chart data as a blob object, follow these steps:
step 1: pdfExport fourth argument set as true.
step 2: Then , pdfExpComplete return as blob object.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection,ExcelExport } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
function App () {
const excelExpComplete = (args) => {
//This event will be triggered when excel exporting.
if (args.promise) {
args.promise.then((e) => {
//In this `then` function, we can get blob data through the arguments after promise resolved.
exportBlob(e.blobData);
});
}
};
const pdfExpComplete= (args) => {
//This event will be triggered when pdf exporting.
if (args.promise) {
args.promise.then((e) => {
//In this `then` function, we can get blob data through the arguments after promise resolved.
exportBlob(e.blobData);
});
}
};
const exportBlob = (blob) => {
let a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'Export';
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport','ExcelExport'];
let ganttChart;
function toolbarClick(args) {
if (args.item.text === "Pdf export") {
ganttChart.pdfExport(null,null,null,true);
}
if (args.item.text === 'Excel export') {
ganttChart.excelExport(null,null,null,true);
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions} pdfExportComplete={pdfExpComplete} excelExportComplete={excelExpComplete} toolbarClick={toolbarClick} allowPdfExport={true} allowExcelExport={true} height='400px' ref={gantt =>ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection,ExcelExport]}/>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection,ExcelExport,ExcelExportCompleteArgs, PdfExportCompleteArgs } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App () {
let excelExpComplete = (args: ExcelExportCompleteArgs) => {
//This event will be triggered when excel exporting.
if (args.promise) {
args.promise.then((e: { blobData: Blob }) => {
//In this `then` function, we can get blob data through the arguments after promise resolved.
exportBlob(e.blobData);
});
}
};
let pdfExpComplete= (args: PdfExportCompleteArgs) => {
//This event will be triggered when pdf exporting.
if (args.promise) {
args.promise.then((e: { blobData: Blob }) => {
//In this `then` function, we can get blob data through the arguments after promise resolved.
exportBlob(e.blobData);
});
}
};
let exportBlob: Function = (blob: Blob) => {
let a: HTMLAnchorElement = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
let url: string = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'Export';
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport','ExcelExport'];
let ganttChart:any;
function toolbarClick(args:any) {
if (args.item.text === "Pdf export") {
ganttChart.pdfExport(null,null,null,true);
}
if (args.item.text === 'Excel export') {
ganttChart.excelExport(null,null,null,true);
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields} pdfExportComplete={pdfExpComplete} excelExportComplete={excelExpComplete} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} allowExcelExport={true} height='400px' ref={gantt =>ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection,ExcelExport]}/>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Single page exporting in gantt
In Gantt, we have provided support to export the Gantt component where each rows are auto-fit to the PDF document page width by setting isFitToWidth as true in fitToWidthSettings of PdfExportProperties.
Also, we can customize the chart width and grid width in exported file using chartWidth and gridWidth by defining it as percentage in string.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App(){
let ganttChart;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
};
const toolbarOptions = ['PdfExport'];
function toolbarClick(args) {
if (args.item.text === 'Pdf export') {
var exportProperties= {
fitToWidthSettings: {
isFitToWidth: true,
}
};
ganttChart.pdfExport(exportProperties);
}
};
return <GanttComponent id='root' dataSource={GanttData} taskFields={taskFields}
toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowPdfExport={true} height='400px'
ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { GanttComponent, Inject, Toolbar, ToolbarItem, PdfExport, Selection, PdfExportProperties } from '@syncfusion/ej2-react-gantt';
import { GanttData } from './datasource';
function App(){
let ganttChart: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
};
const toolbarOptions: ToolbarItem[] = ['PdfExport'];
function toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Pdf export') {
let exportProperties : PdfExportProperties= {
fitToWidthSettings: {
isFitToWidth: true,
}
};
ganttChart.pdfExport(exportProperties);
}
};
return <GanttComponent id='root' dataSource={GanttData} taskFields={taskFields}
toolbar={toolbarOptions}
toolbarClick={toolbarClick} allowPdfExport={true} height='400px'
ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Multiple gantt exporting in React Gantt component
PDF export provides an option for exporting multiple Gantt to same file. In this exported document, each Gantt will be exported to a new page of the document in same file.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
function App () {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport'];
let firstGantt;
let secondGantt;
function toolbarClick(args) {
if (args.item.text === 'Pdf export') {
const firstGanttExport = this.firstGantt.pdfExport({}, true);
firstGanttExport.then((pdfData) => {
secondGantt.pdfExport({}, false, pdfData);
});
}
};
return (<div>
<p><b>First Gantt:</b></p>
<GanttComponent id='firstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
<Inject services={[Toolbar, PdfExport, Selection]}/>
</GanttComponent>
<p><b>Second Gantt:</b></p>
<GanttComponent id='secondGantt' dataSource={[data[1]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar,PdfExport, Selection]}/>
</GanttComponent>
</div>)
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
function App () {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport'];
let firstGantt:any;
let secondGantt:any;
function toolbarClick(args) {
if (args.item.text === 'Pdf export') {
const firstGanttExport = this.firstGantt.pdfExport({}, true);
firstGanttExport.then((pdfData) => {
secondGantt.pdfExport({}, false, pdfData);
});
}
};
return (<div>
<p><b>First Gantt:</b></p>
<GanttComponent id='firstGantt' dataSource={[data[0]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='280px' ref={gantt => firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'>
<Inject services={[Toolbar, PdfExport, Selection]}/>
</GanttComponent>
<p><b>Second Gantt:</b></p>
<GanttComponent id='secondGantt' dataSource={[data[1]]} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='250px' ref={gantt => secondGantt = gantt} treeColumnIndex={1}>
<Inject services={[Toolbar,PdfExport, Selection]}/>
</GanttComponent>
</div>)
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Applying Themes in PDF Export
PDF export provides an option to include theme for the exported PDF document.
To apply theme in exported PDF, define the theme in pdfExportProperties.
The available themes are:
- Material
- Fabric
- Bootstrap
- Bootstrap 4
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
function App () {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
let ganttChart;
const toolbarOptions = ['PdfExport'];
function toolbarClick(args) {
if (args.item.text === 'Pdf export') {
let exportProperties = {
theme:"Fabric"
};
ganttChart.pdfExport(exportProperties);
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='400px' ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]}/>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
function App () {
let ganttChart;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['PdfExport'];
function toolbarClick(args) {
if (args.item.text === 'Pdf export') {
let exportProperties: PdfExportProperties = {
theme:"Fabric"
};
ganttChart.pdfExport(exportProperties);
}
};
return <GanttComponent id='root' dataSource={data} taskFields={taskFields} toolbar={toolbarOptions} toolbarClick={toolbarClick} allowPdfExport={true} height='400px' ref={gantt => ganttChart = gantt}>
<Inject services={[Toolbar, PdfExport, Selection]}/>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/29.2.4/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-gantt .e-gantt-chart .e-custom-holiday {
background-color:lightgreen;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>