Contents
Time line in React Gantt component
27 Jun 202524 minutes to read
In the Gantt component, timeline is used to represent the project duration as individual cells with defined unit and formats.
Timeline view modes
Gantt contains the following in-built timeline view modes:
- Hour
- Day
- Week
- Month
- Year
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.
Week timeline mode
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';
function App (){
const taskFields= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings = {
timelineViewMode:'Week'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings: any = {
timelineViewMode:'Week'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={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/30.1.37/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>Month timeline mode
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';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings = {
timelineUnitSize: 80,
timelineViewMode:'Month'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings: any = {
timelineUnitSize: 80,
timelineViewMode:'Month'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={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/30.1.37/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>Year timeline mode
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';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings = {
timelineUnitSize: 80,
timelineViewMode:'Year'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings: any = {
timelineUnitSize: 80,
timelineViewMode:'Year'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={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/30.1.37/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>Day timeline mode
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';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings = {
timelineViewMode:'Day'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings: any = {
timelineViewMode:'Day'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={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/30.1.37/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>Hour timeline mode
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'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings = {
timelineViewMode:'Hour'
};
return <GanttComponent dataSource={data} taskFields={taskFields} dateFormat="M/d/yyyy hh:mm:ss tt" durationUnit="Minute"
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));let data: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings: any = {
timelineViewMode:'Hour'
};
return <GanttComponent dataSource={data} taskFields={taskFields} dateFormat="M/d/yyyy hh:mm:ss tt" durationUnit="Minute"
timelineSettings={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/30.1.37/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>Change timeline view mode programmatically
In the Gantt component, the timeline view mode can be modified programmatically. As described below, the Dropdown menu is also used to change the timeline view. The Dropdownlist component can be used to create a dropdown menu. Once the dropdown menu is enabled, the timelineViewMode property from the timelineSettings can be utilized to switch the timeline view between Hour, Day, Week, Month, and Year. 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 { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App (){
let ganttInstance;
const taskFields= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const modes=[
{
item: "Hour",
id:"1"
},
{
item: "Day",
id:"2"
},
{
item: "Week",
id:"3"
},
{
item: "Month",
id:"4"
},
{
item: "Year",
id:"5"
}
];
const fields={text:"item", value:"id"};
function onChange(args) {
if(args.value==="1")
{
ganttInstance.timelineSettings.timelineViewMode="Hour";
}
else if(args.value==="2")
{
ganttInstance.timelineSettings.timelineViewMode="Day";
}
else if(args.value==="3")
{
ganttInstance.timelineSettings.timelineViewMode="Week";
}
else if(args.value==="4")
{
ganttInstance.timelineSettings.timelineViewMode="Month";
}
else if(args.value==="5")
{
ganttInstance.timelineSettings.timelineViewMode="Year";
}
}
return (
<div>
<DropDownListComponent id="modes" placeholder="Select" dataSource={modes}
fields={fields} change={onChange} width="150px"/>
<GanttComponent ref={gantt => ganttInstance =gantt}
dataSource={data} taskFields={taskFields}
height = '450px'>
</GanttComponent>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent} from '@syncfusion/ej2-react-gantt';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App (){
let ganttInstance:any;
const taskFields:any= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const modes:any=[
{
item: "Hour",
id:"1"
},
{
item: "Day",
id:"2"
},
{
item: "Week",
id:"3"
},
{
item: "Month",
id:"4"
},
{
item: "Year",
id:"5"
}
];
const fields:any={text:"item", value:"id"};
function onChange(args:any) {
if(args.value==="1")
{
ganttInstance.timelineSettings.timelineViewMode="Hour";
}
else if(args.value==="2")
{
ganttInstance.timelineSettings.timelineViewMode="Day";
}
else if(args.value==="3")
{
ganttInstance.timelineSettings.timelineViewMode="Week";
}
else if(args.value==="4")
{
ganttInstance.timelineSettings.timelineViewMode="Month";
}
else if(args.value==="5")
{
ganttInstance.timelineSettings.timelineViewMode="Year";
}
}
return (
<div>
<DropDownListComponent id="modes" placeholder="Select" dataSource={modes}
fields={fields} change={onChange} width="150px"/>
<GanttComponent ref={gantt => ganttInstance =gantt}
dataSource={data} taskFields={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/30.1.37/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>Week start day customization
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';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings = {
timelineViewMode:'Week',
weekStartDay: 3
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings: any = {
timelineViewMode:'Week',
weekStartDay: 3
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={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/30.1.37/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>Customize automatic timescale update action
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';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions = {
allowEditing: true,
allowTaskbarEditing: true
};
const timelineSettings = {
updateTimescaleView: false
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} allowSelection={true}
editSettings={editOptions} height = '450px'>
<Inject services={[Edit, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));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';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowEditing: true,
allowTaskbarEditing: true
};
const timelineSettings: any = {
updateTimescaleView: false
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} allowSelection={true}
editSettings={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/30.1.37/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>Timeline cells tooltip
In the Gantt component, you can enable or disable the mouse hover tooltip of timeline cells using the timelineSettings.showTooltip property. The default value of this property is true. The following code example shows how to enable the timeline cells tooltip in Gantt.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings = {
showTooltip: true
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const timelineSettings: any = {
showTooltip: true
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={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/30.1.37/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>Show/hide weekends
The timelineSettings.showWeekend property is used to customize the timeline in the Gantt component by controlling the visibility of weekends. To exclude weekends from the timeline, set the showWeekend property to false in the timelineSettings configuration. This feature is particularly useful for focusing the timeline on working days, enhancing project management efficiency by hiding weekends from the view.
Note: To customize non-working or weekend days in the Gantt chart, refer to the workWeek documentation for detailed information.
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';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions = {
allowEditing: true,
allowTaskbarEditing: true
};
const timelineSettings = {
showWeekend: false
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} allowSelection={true}
editSettings={editOptions} height = '450px'>
<Inject services={[Edit, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));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';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowEditing: true,
allowTaskbarEditing: true
};
const timelineSettings: any = {
showWeekend: false
};
return <GanttComponent dataSource={data} taskFields={taskFields}
timelineSettings={timelineSettings} allowSelection={true}
editSettings={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/30.1.37/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>Limitations
- The
showWeekendfeature does not support baselines.- The
showWeekendis not compatible with the manual task mode.- Non-working hours cannot be excluded when
showWeekendis set to false.- Holidays are not excluded from the timeline if
showWeekendis set to false.
Timeline template
In the Gantt component, you can customize timeline cells using the timelineTemplate property, allowing for the customization of HTML content within timeline cells. This feature enhances the visual appeal and enables personalized functionality.
When designing the timeline cells, you can utilize the following context properties within the template:
-
date: Defines the date of the timeline cells. -
value: Defines the formatted date value that will be displayed in the timeline cells. -
tier: Defines whether the cell is part of the top or bottom tier.
The following code example how to customize the top tier to display the week’s weather details and the bottom tier to highlight working and non-working days, with formatted text for holidays.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection, DayMarkers, ColumnsDirective, ColumnDirective, HolidaysDirective, HolidayDirective } from '@syncfusion/ej2-react-gantt'
import {timelineTemplateData} from './datasource'
function App() {
let ganttInstance ;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID'
};
const bgColor = (value, date) => {
if (value === "S") {
return "#7BD3EA"
}
const parsedDate = new Date(date);
for (let i = 0; i < ganttInstance.holidays.length; i++) {
const holiday = ganttInstance.holidays[i];
const fromDate = new Date(holiday.from);
const toDate = new Date(holiday.to)
if (parsedDate >= fromDate && parsedDate <= toDate) {
return "#97E7E1";
}
}
return "#E0FBE2"
};
const imagedate = () => {
const getImage = Math.floor(Math.random() * 5) + 1;
return getImage + ".svg";
}
const holidayValue = (value, date) => {
const parsedDate = new Date(date);
for (let i = 0; i < ganttInstance.holidays.length; i++) {
const holiday = ganttInstance.holidays[i];
const fromDate = new Date(holiday.from);
const toDate = new Date(holiday.to)
if (parsedDate >= fromDate && parsedDate <= toDate) {
const options = { weekday: 'short' };
return parsedDate.toLocaleDateString('en-US', options).toLocaleUpperCase();
}
}
return value
}
const timelineTemplate = (props) => {
if (props.tier == 'topTier') {
return (<div
className="e-header-cell-label e-gantt-top-cell-text"
style={{
width: '100%',
backgroundColor: '#FBF9F1',
fontWeight: 'bold',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
title={props.date}
>
<div>{props.value}</div>
<div
style={{
width: '30px',
height: '30px',
lineHeight: 'normal',
paddingLeft: '10px',
}}
>
<img style={{ width: '100%', height: '100%' }} src={imagedate()} alt="Image" />
</div>
</div>)
}
if (props.tier == 'bottomTier') {
return (<div
className="e-header-cell-label e-gantt-top-cell-text"
style={{
width: '100%',
backgroundColor: bgColor(props.value, props.date),
textAlign: 'center',
height: '100%',
display: 'flex',
alignItems: 'center',
fontWeight: 'bold',
justifyContent: 'center',
}}
title={props.date}
>
{holidayValue(props.value, props.date)}
</div>)
}
}
const splitterSettings = {
columnIndex: 1
};
const timelineSettings = {
topTier: {
unit: 'Week',
format: 'dd/MM/yyyy'
},
bottomTier: {
unit: 'Day',
count: 1
},
timelineUnitSize: 100
};
const labelSettings = {
leftLabel: 'TaskName',
};
const projectStartDate = new Date('03/31/2019');
const projectEndDate = new Date('04/23/2019');
return <GanttComponent id='Timeline' ref={g => ganttInstance = g} dataSource={timelineTemplateData} timelineTemplate={timelineTemplate}
splitterSettings={splitterSettings}
taskFields={taskFields} height='550px'
projectStartDate={projectStartDate} projectEndDate={projectEndDate} timelineSettings={timelineSettings}
labelSettings={labelSettings} treeColumnIndex={1}>
<ColumnsDirective>
<ColumnDirective field='TaskID' visible={false}></ColumnDirective>
<ColumnDirective field='TaskName' width={300} ></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='EndDate' ></ColumnDirective>
<ColumnDirective field='Duration' ></ColumnDirective>
<ColumnDirective field='Progress' ></ColumnDirective>
</ColumnsDirective>
<HolidaysDirective>
<HolidayDirective from='04/04/2019' to='04/05/2019' label='Public Holiday'></HolidayDirective>
<HolidayDirective from='04/12/2019' to='04/12/2019' label='Good Friday'></HolidayDirective>
</HolidaysDirective>
<Inject services={[Selection, DayMarkers]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import { useRef } from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection, DayMarkers, ColumnsDirective, ColumnDirective, HolidaysDirective, HolidayDirective } from '@syncfusion/ej2-react-gantt';
import {timelineTemplateData} from './datasource'
function App() {
let ganttInstance :any ;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID'
};
const bgColor = (value: string, date: string): string => {
if (value === "S") {
return "#7BD3EA"
}
const parsedDate = new Date(date);
for (let i = 0; i < ganttInstance.holidays.length; i++) {
const holiday = ganttInstance.holidays[i];
const fromDate = new Date(holiday.from);
const toDate = new Date(holiday.to)
if (parsedDate >= fromDate && parsedDate <= toDate) {
return "#97E7E1";
}
}
return "#E0FBE2"
};
const imagedate = () => {
const getImage = Math.floor(Math.random() * 5) + 1;
return getImage + ".svg";
}
const holidayValue = (value: string, date: string): string => {
const parsedDate = new Date(date);
for (let i = 0; i < ganttInstance.holidays.length; i++) {
const holiday = ganttInstance.holidays[i];
const fromDate = new Date(holiday.from);
const toDate = new Date(holiday.to)
if (parsedDate >= fromDate && parsedDate <= toDate) {
const options: any = { weekday: 'short' };
return parsedDate.toLocaleDateString('en-US', options).toLocaleUpperCase();
}
}
return value
}
const timelineTemplate = (props): any => {
if (props.tier == 'topTier') {
return (<div
className="e-header-cell-label e-gantt-top-cell-text"
style={{
width: '100%',
backgroundColor: '#FBF9F1',
fontWeight: 'bold',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
title={props.date}
>
<div>{props.value}</div>
<div
style={{
width: '30px',
height: '30px',
lineHeight: 'normal',
paddingLeft: '10px',
}}
>
<img style={{ width: '100%', height: '100%' }} src={imagedate()} alt="Image" />
</div>
</div>)
}
if (props.tier == 'bottomTier') {
return (<div
className="e-header-cell-label e-gantt-top-cell-text"
style={{
width: '100%',
backgroundColor: bgColor(props.value, props.date),
textAlign: 'center',
height: '100%',
display: 'flex',
alignItems: 'center',
fontWeight: 'bold',
justifyContent: 'center',
}}
title={props.date}
>
{holidayValue(props.value, props.date)}
</div>)
}
}
const splitterSettings: any = {
columnIndex: 1
};
const timelineSettings: any = {
topTier: {
unit: 'Week',
format: 'dd/MM/yyyy'
},
bottomTier: {
unit: 'Day',
count: 1
},
timelineUnitSize: 100
};
const labelSettings: any = {
leftLabel: 'TaskName',
};
const projectStartDate = new Date('03/31/2019');
const projectEndDate = new Date('04/23/2019');
return <GanttComponent id='Timeline' ref={g => ganttInstance = g} dataSource={timelineTemplateData} timelineTemplate={timelineTemplate}
splitterSettings={splitterSettings}
taskFields={taskFields} height='550px'
projectStartDate={projectStartDate} projectEndDate={projectEndDate} timelineSettings={timelineSettings}
labelSettings={labelSettings} treeColumnIndex={1}>
<ColumnsDirective>
<ColumnDirective field='TaskID' visible={false}></ColumnDirective>
<ColumnDirective field='TaskName' width={300} ></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='EndDate' ></ColumnDirective>
<ColumnDirective field='Duration' ></ColumnDirective>
<ColumnDirective field='Progress' ></ColumnDirective>
</ColumnsDirective>
<HolidaysDirective>
<HolidayDirective from='04/04/2019' to='04/05/2019' label='Public Holiday'></HolidayDirective>
<HolidayDirective from='04/12/2019' to='04/12/2019' label='Good Friday'></HolidayDirective>
</HolidaysDirective>
<Inject services={[Selection, DayMarkers]} />
</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/30.1.37/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>