Event Markers in JavaScript Gantt control

17 Mar 2023 / 1 minute 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.

Source

Preview

index.ts

index.html

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/20.4.48/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>
</head>

<body>
       
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>