Event markers in EJ2 TypeScript Gantt control
17 Aug 202318 minutes to read
The event markers in the Gantt control is used to highlight the important events in a project. Event markers can be initialized by using the eventMarkers property, and you can define date and label for the event markers using the day and label properties. You can also customize it using the cssClass properties. The following code example shows how to add event markers in the Gantt control.
To highlight the days, inject the DayMarkers module into the Gantt control.
import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(DayMarkers);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
resourceInfo: 'resources',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
},
eventMarkers: [
{
day: '04/10/2019',
cssClass: 'e-custom-event-marker',
label: 'Project approval and kick-off'
}
]
});
gantt.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.e-gantt .e-gantt-chart .e-custom-event-marker {
width: 1px;
border-left: 2px green dotted;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>Displaying eventMarkers in stacked manner
When eventMarkers are given in consecutive dates and zoomToFit is performed, they may overlap. To avoid this, you can update the position of the eventMarkers in the dataBound and actionComplete events so that they are not overlapped and are visible to read.
import { Gantt, DayMarkers,Toolbar } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(DayMarkers, Toolbar);
function updateEventMarker() {
document.getElementsByClassName('e-span-label')[1].style.top = '100px';
document.getElementsByClassName('e-gantt-right-arrow')[1].style.top =
'110px';
}
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
},
eventMarkers: [
{
day: new Date('04/02/2019'),
},
{
day: new Date('04/09/2019'),
label: 'Research phase research phase research phase',
},
{
day: new Date('04/10/2019'),
label: 'Design phase',
},
{
day: new Date('05/23/2019'),
label: 'Production phase',
},
{
day: new Date('06/20/2019'),
label: 'Sales and marketing phase',
},
],
toolbar: ['ZoomIn', 'ZoomOut', 'ZoomToFit'],
dataBound:function () {
updateEventMarker();
gantt.fitToProject();
},
actionComplete:function () {
updateEventMarker();
},
projectStartDate: new Date('03/24/2019'),
projectEndDate: new Date('07/06/2019')
});
gantt.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.e-gantt .e-gantt-chart .e-custom-event-marker {
width: 1px;
border-left: 2px green dotted;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>Label positions in EJ2 TypeScript gantt control
17 Aug 202318 minutes to read
The EJ2 Gantt chart offers powerful features for customizing various labels position within the chart, enabling users to present relevant project information clearly. In EJ2 Gantt chart, labelSettings feature provides three key options for label customization: rightLabel, taskLabel, and leftLabel. Label positions can be initialized by using the labelSettings property.
The following code example shows how to add label positions in the gantt control.
import { Gantt, Selection } from '@syncfusion/ej2-gantt';
import { GanttData, resourceCollection } from 'datasource.ts';
Gantt.Inject(Selection);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
resources: resourceCollection,
viewType: 'ResourceView',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
resourceInfo: 'resources',
work: 'work',
child: 'subtasks'
},
resourceFields: {
id: 'resourceId',
name: 'resourceName',
unit: 'resourceUnit',
group: 'resourceGroup'
},
columns: [
{ field: 'TaskID', visible: false },
{ field: 'TaskName', headerText: 'Name', width: 250 },
{ field: 'work', headerText: 'Work' },
{ field: 'Progress' },
{ field: 'resourceGroup', headerText: 'Group' },
{ field: 'StartDate' },
{ field: 'Duration' },
],
labelSettings: {
rightLabel: 'resources',
leftLabel: 'TaskName',
taskLabel: '${Progress}%'
},
splitterSettings: {
columnIndex: 3
},
height: '450px',
projectStartDate: new Date('03/22/2019'),
projectEndDate: new Date('05/18/2019')
});
gantt.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>Managing event marker overlapping in EJ2 TypeScript gantt control
17 Aug 202318 minutes to read
In the EJ2 Gantt control, it is possible to customize multiple eventMarkers for the same date. However, by default, in such scenarios, these markers may overlap each other, resulting in visual clutter. To manage this, the following sample code demonstrates how to utilize the Gantt dataBound function to obtain label and arrow classes. It performs a loop action to fulfill the current requirement and to avoid overlapping. For further clarification, the code snippet below illustrates the flow of its implementation.
import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';
Gantt.Inject(DayMarkers);
let gantt: Gantt = new Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
eventMarkers: [
{
day: '04/10/2019',
cssClass: 'e-custom-event-marker',
label: 'Project approval and kick-off'
},
{
day: '04/10/2019',
cssClass: 'e-custom-event-marker',
label: 'Project approval and kick-off'
},
],
dataBound(): void {
let labeltop: number = 100;
let rightarrow: number = 110;
for (let i: number = 0; i < this.eventMarkers.length; i++) {
(document.getElementsByClassName('e-span-label')[i] as HTMLElement).style.top = labeltop + 'px';
(document.getElementsByClassName('e-gantt-right-arrow')[i] as HTMLElement).style.top = rightarrow + 'px';
labeltop += 35;
rightarrow += 35;
}
},
projectStartDate: new Date('03/24/2019'),
projectEndDate: new Date('07/06/2019')
});
gantt.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.e-gantt .e-gantt-chart .e-custom-event-marker {
width: 1px;
border-left: 2px green dotted;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>