In the Gantt component, timeline is used to represent the project duration as individual cells with defined unit and formats.
Gantt contains the following in-built timeline view modes:
Timescale mode in Gantt can be defined by using timelineViewMode property and also we can define timescale mode of top tier and bottom tier by using topTier.unit and bottomTier.unit properties.
In the Week timeline mode, the upper part of the schedule header displays the weeks, whereas the bottom half of the header displays the days. Refer to the following code example.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineViewMode: 'Week'
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineViewMode:'Week'
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In the Month timeline mode, the upper part of the schedule header displays the months, whereas the bottom header of the schedule displays its corresponding weeks. Refer to the following code example.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineUnitSize: 80,
timelineViewMode: 'Month'
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineUnitSize: 80,
timelineViewMode:'Month'
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In the Year timeline mode, the upper schedule header displays the years whereas, the bottom header displays its corresponding months. Refer to the following code example.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineUnitSize: 80,
timelineViewMode: 'Year'
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineUnitSize: 80,
timelineViewMode:'Year'
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In the Day timeline mode, the upper part of the header displays the days whereas, the bottom schedule header displays its corresponding hours. Refer to the following code example.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineViewMode: 'Day'
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineViewMode:'Day'
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));An Hour timeline mode tracks the tasks in minutes scale. In this mode, the upper schedule header displays hour scale and the lower schedule header displays its corresponding minutes.
let data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:05:00 AM'), Duration: 10, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:05:00 AM'), Duration: 10, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 08:05:00 AM'), Duration: 10, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineViewMode: 'Hour'
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} dateFormat="M/d/yyyy hh:mm:ss tt" durationUnit="Minute" timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>let data: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019 08:05:00 AM'), Duration: 10, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019 08:05:00 AM'), Duration: 10, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019 08:05:00 AM'), Duration: 10, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019 08:15:00 AM'), Duration: 15, Progress: 50 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineViewMode:'Hour'
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} dateFormat="M/d/yyyy hh:mm:ss tt" durationUnit="Minute"
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));Gantt component contains two tier layout in timeline, we can customize the top tier and bottom tier using topTier and bottomTier properties. Timeline tier’s unit can be defined by using unit property and format property was used to define date format of timeline cell and count property was used to define how many unit will be combined as single cell and formatter property was used to define custom method to format the date value of timeline cell.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
topTier: {
format: 'MMM',
unit: 'Month'
},
bottomTier: {
unit: 'Day'
}
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
topTier: {
format: 'MMM',
unit: 'Month'
},
bottomTier: {
unit: 'Day'
}
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In Gantt, timeline cells in top tier and bottom tier can be combined with number of timeline units, this can be acheived by using topTier.count and bottomTier.count properties. Please refer the below sample.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineUnitSize: 200,
topTier: {
unit: 'Year'
},
bottomTier: {
unit: 'Month',
count: 6
}
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineUnitSize:200,
topTier: {
unit: 'Year'
},
bottomTier: {
unit: 'Month',
count:6
}
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In the Gantt component, you can format the value of top and bottom timeline cells using the standard date format string or the custom formatter method. This can be done using the topTier.format, topTier.formatter, bottomTier.format and bottomTier.formatter properties. The following example shows how to use the formatter method for timeline cells.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineUnitSize: 50,
topTier: {
unit: 'Month',
count: 3,
formatter: (date) => {
var month = date.getMonth();
if (month >= 0 && month <= 2) {
return 'Q1';
}
else if (month >= 3 && month <= 5) {
return 'Q2';
}
else if (month >= 6 && month <= 8) {
return 'Q3';
}
else {
return 'Q4';
}
}
},
bottomTier: {
unit: 'Month',
format: 'MMM'
},
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} projectStartDate='01/04/2019' projectEndDate='12/30/2019' timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineUnitSize: 50,
topTier: {
unit: 'Month',
count: 3,
formatter: (date:any) => {
var month = date.getMonth();
if (month >= 0 && month <=2) {
return 'Q1';
} else if(month >= 3 && month <=5) {
return 'Q2';
} else if(month >= 6 && month <=8) {
return 'Q3';
} else {
return 'Q4';
}
}
},
bottomTier: {
unit: 'Month',
format: 'MMM'
},
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} projectStartDate='01/04/2019' projectEndDate='12/30/2019'
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In the Gantt component, you can define the width value of timeline cell using the timelineSettings.timelineUnitSize property. This value will be set to the bottom timeline cell, and the width value of top timeline cell will be calculated automatically based on bottom tier cell width using the topTier.unit and timelineSettings.timelineUnitSize properties. Refer to the following example.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineUnitSize: 150
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineUnitSize: 150
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In the Gantt component, you can customize the week start day using the weekStartDay property. By default, the weekStartDay is set to 0, which specifies the Sunday as a start day of the week. But, you can customize the week start day by using the following code example.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.timelineSettings = {
timelineViewMode: 'Week',
weekStartDay: 3
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public timelineSettings: any = {
timelineViewMode:'Week',
weekStartDay: 3
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} height = '450px'>
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In the Gantt component, the schedule timeline will be automatically updated when the tasks date values are updated beyond the project start date and end date ranges. This can be enabled or disabled using the updateTimescaleView property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.editOptions = {
allowEditing: true,
allowTaskbarEditing: true
};
this.timelineSettings = {
updateTimescaleView: false
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} timelineSettings={this.timelineSettings} allowSelection={true} editSettings={this.editOptions} height='450px'>
<Inject services={[Edit, 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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
public editOptions: EditSettingsModel = {
allowEditing: true,
allowTaskbarEditing: true
};
public timelineSettings: any = {
updateTimescaleView: false
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
timelineSettings={this.timelineSettings} allowSelection={true}
editSettings={this.editOptions} height = '450px'>
<Inject services={[Edit, Selection]} />
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));The zooming support provides options to increase or decrease the width of timeline cells and also provides options to change the timeline units dynamically. This support enables you to view the tasks in a project clearly from minute to decade timespan. To enable the zooming features, define the ZoomIn, ZoomOut, and ZoomToFit items to toolbar items collections, and this action can be performed on external actions such as button click using the zoomIn, zoomOut, and fitToProject built-in methods. The following zooming options are available to view the project:
This support is used to increase the timeline width and timeline unit from years to minutes
timespan. When the ZoomIn icon was clicked, the timeline cell width is increased when the cell
size exceeds the specified range and the timeline unit is changed based on the current zoom levels.
This support is used to increase the timeline width and timeline unit from minutes to years timespan. When the ZoomOut icon was clicked, the timeline cell width is decreased when the cell size falls behind the specified range and the timeline view mode is changed based on the current zooming levels.
This support is used to view all the tasks available in a project within available area on the chart part of Gantt. When users click the ZoomToFit icon, then all the tasks are rendered within the available chart container width.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.toolbarOptions = ['ZoomIn', 'ZoomOut', 'ZoomToFit'];
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} toolbar={this.toolbarOptions} height='450px'>
<Inject services={[Toolbar]}/>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ToolbarItem }from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
public toolbarOptions: ToolbarItem[] = ['ZoomIn','ZoomOut','ZoomToFit'];
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields}
toolbar={this.toolbarOptions} height = '450px'>
<Inject services={[Toolbar]} />
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));In Gantt, the zoom in and zoom out actions are performed based on the predefined zooming levels in the zoomingLevels property. You can customize the zooming actions by defining the required zooming collection to the zoomingLevels property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
let customZoomingLevels = [{
topTier: { unit: 'Month', format: 'MMM, yy', count: 1 },
bottomTier: { unit: 'Week', format: 'dd', count: 1 }, timelineUnitSize: 33, level: 0,
timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 66, level: 1,
timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 99, level: 2,
timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 33, level: 3,
timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 66, level: 4,
timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
bottomTier: { unit: 'Hour', format: 'hh a', count: 12 }, timelineUnitSize: 66, level: 5,
timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
bottomTier: { unit: 'Hour', format: 'hh a', count: 6 }, timelineUnitSize: 99, level: 6,
timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
];
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.toolbarOptions = ['ZoomIn', 'ZoomOut', 'ZoomToFit'];
}
dataBound() {
this.ganttInstance.zoomingLevels = customZoomingLevels;
}
;
render() {
return <GanttComponent dataSource={data} ref={gantt => this.ganttInstance = gantt} taskFields={this.taskFields} dataBound={this.dataBound.bind(this)} toolbar={this.toolbarOptions} height='450px'>
<Inject services={[Toolbar]}/>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ToolbarItem , ZoomTimelineSettings}from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
let customZoomingLevels: ZoomTimelineSettings[] = [{
topTier: { unit: 'Month', format: 'MMM, yy', count: 1 },
bottomTier: { unit: 'Week', format: 'dd', count: 1 }, timelineUnitSize: 33, level: 0,
timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 66, level: 1,
timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Month', format: 'MMM, yyyy', count: 1 },
bottomTier: { unit: 'Week', format: 'dd MMM', count: 1 }, timelineUnitSize: 99, level: 2,
timelineViewMode: 'Month', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 33, level: 3,
timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Week', format: 'MMM dd, yyyy', count: 1 },
bottomTier: { unit: 'Day', format: 'd', count: 1 }, timelineUnitSize: 66, level: 4,
timelineViewMode: 'Week', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
bottomTier: { unit: 'Hour', format: 'hh a', count: 12 }, timelineUnitSize: 66, level: 5,
timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
{
topTier: { unit: 'Day', format: 'E dd yyyy', count: 1 },
bottomTier: { unit: 'Hour', format: 'hh a', count: 6 }, timelineUnitSize: 99, level: 6,
timelineViewMode: 'Day', weekStartDay: 0, updateTimescaleView: true, weekendBackground: null, showTooltip: true
},
];
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
private ganttInstance:any;
public dataBound() {
this.ganttInstance.zoomingLevels = customZoomingLevels;
};
public toolbarOptions: ToolbarItem[] = ['ZoomIn','ZoomOut','ZoomToFit'];
render() {
return <GanttComponent dataSource={data}
ref={gantt => this.ganttInstance = gantt} taskFields={this.taskFields}
dataBound = {this.dataBound.bind(this)} toolbar={this.toolbarOptions}
height = '450px'>
<Inject services={[Toolbar]} />
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));You can perform the various zoom actions dynamically or on external click action using the following methods:
zoomInzoomOutfitToProjectimport * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
}
zoomIn() {
this.ganttInstance.zoomIn();
}
zoomOut() {
this.ganttInstance.zoomOut();
}
fitToProject() {
this.ganttInstance.fitToProject();
}
render() {
return (<div>
<ButtonComponent onClick={this.zoomIn.bind(this)}>ZoomIn</ButtonComponent>
<ButtonComponent onClick={this.zoomOut.bind(this)}>ZoomOut</ButtonComponent>
<ButtonComponent onClick={this.fitToProject.bind(this)}>FitToProject</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt => this.ganttInstance = gantt} taskFields={this.taskFields} height='450px'>
</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/20.2.43/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>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent}from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
private ganttInstance:any;
zoomIn() {
this.ganttInstance.zoomIn();
}
zoomOut() {
this.ganttInstance.zoomOut();
}
fitToProject() {
this.ganttInstance.fitToProject();
}
render() {
return (<div>
<ButtonComponent onClick={this.zoomIn.bind(this)}>ZoomIn</ButtonComponent>
<ButtonComponent onClick={this.zoomOut.bind(this)}>ZoomOut</ButtonComponent>
<ButtonComponent onClick={this.fitToProject.bind(this)}>FitToProject</ButtonComponent>
<GanttComponent dataSource={data}
ref={gantt => this.ganttInstance = gantt} taskFields={this.taskFields} height = '450px'>
</GanttComponent></div>);
}
};
ReactDOM.render(<App />, document.getElementById('root'));