Event Markers in React Gantt Component

27 Jun 202424 minutes to read

The event markers in the Gantt component 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 component.

To highlight the days, inject the DayMarkers module into the Gantt component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, DayMarkers, EventMarkersDirective, EventMarkerDirective } 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 eventMarkerDay = new Date('4/10/2019');
        return <GanttComponent dataSource={data} taskFields={taskFields} height = '450px'>
        <EventMarkersDirective>
              <EventMarkerDirective day={eventMarkerDay} cssClass='e-custom-event-marker'  label='Project approval and kick-off' ></EventMarkerDirective>
        </EventMarkersDirective>
            <Inject services={[DayMarkers]} />
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, DayMarkers, EventMarkersDirective, EventMarkerDirective } 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 eventMarkerDay: Date = new Date('4/10/2019');
        return <GanttComponent dataSource={data} taskFields={taskFields} height = '450px'>
        <EventMarkersDirective>
              <EventMarkerDirective day={eventMarkerDay} cssClass='e-custom-event-marker'  label='Project approval and kick-off' ></EventMarkerDirective>
        </EventMarkersDirective>
            <Inject services={[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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		
       .e-gantt .e-gantt-chart .e-custom-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='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Managing event marker overlapping in react gantt component

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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, DayMarkers, EventMarkersDirective, EventMarkerDirective } 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'
  };
  function dataBound() {
    let labeltop = 100;
    let rightarrow = 110;
    const eventMarkerLabels = document.getElementsByClassName("e-span-label");
    const eventMarkerArrows = document.getElementsByClassName("e-gantt-right-arrow");
    for (let i = 0; i < eventMarkerLabels.length; i++) {
      const label = eventMarkerLabels[i];
      const arrow = eventMarkerArrows[i];
      if (label && arrow) {
        label.style.top = labeltop + "px";
        arrow.style.top = rightarrow + "px";
      }
      labeltop += 35;
      rightarrow += 35;
    }
  };
  const eventMarkerDay1 = new Date('4/10/2019');
  const eventMarkerDay2 = new Date('4/10/2019');
        return <GanttComponent dataSource={data} taskFields={taskFields} height = '450px' dataBound={dataBound}>
        <EventMarkersDirective>
              <EventMarkerDirective day={eventMarkerDay1} cssClass='e-custom-event-marker'  label='Project approval and kick-off' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay2} cssClass='e-custom-event-marker'  label='Project approval and kick-off' ></EventMarkerDirective>
        </EventMarkersDirective>
            <Inject services={[DayMarkers]} />
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, DayMarkers, EventMarkersDirective, EventMarkerDirective } 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'
  };
  function dataBound() {
    let labeltop = 100;
    let rightarrow = 110;
    const eventMarkerLabels = document.getElementsByClassName("e-span-label");
    const eventMarkerArrows = document.getElementsByClassName("e-gantt-right-arrow");
    for (let i = 0; i < eventMarkerLabels.length; i++) {
      const label = eventMarkerLabels[i] as HTMLElement;
      const arrow = eventMarkerArrows[i] as HTMLElement;
      if (label && arrow) {
        label.style.top = labeltop + "px";
        arrow.style.top = rightarrow + "px";
      }
      labeltop += 35;
      rightarrow += 35;
    }
  };
  const eventMarkerDay1 = new Date('4/10/2019');
  const eventMarkerDay2 = new Date('4/10/2019');
        return <GanttComponent dataSource={data} taskFields={taskFields} height = '450px' dataBound={dataBound}>
        <EventMarkersDirective>
              <EventMarkerDirective day={eventMarkerDay1} cssClass='e-custom-event-marker'  label='Project approval and kick-off' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay2} cssClass='e-custom-event-marker'  label='Project approval and kick-off' ></EventMarkerDirective>
        </EventMarkersDirective>
            <Inject services={[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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		
       .e-gantt .e-gantt-chart .e-custom-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='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Note: The above-provided sample will only be applicable when using more than one eventMarkers for the same date. However, it is not applicable for default scenarios.

Label positions in react gantt control

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.

let resourceCollection = [
    { ResourceId: 1, ResourceName: 'Martin Tamer', ResourceGroup: 'Planning Team'},
    { ResourceId: 2, ResourceName: 'Rose Fuller', ResourceGroup: 'Testing Team' },
    { ResourceId: 3, ResourceName: 'Margaret Buchanan', ResourceGroup: 'Approval Team' },
    { ResourceId: 4, ResourceName: 'Fuller King', ResourceGroup: 'Development Team' },
    { ResourceId: 5, ResourceName: 'Davolio Fuller', ResourceGroup: 'Approval Team' },
    { ResourceId: 6, ResourceName: 'Van Jack', ResourceGroup: 'Development Team' },
];
let data = [
    {
        TaskID: 1,
        TaskName: 'Project initiation',
        StartDate: new Date('03/29/2019'),
        EndDate: new Date('04/21/2019'),
    }, {
        TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 2, ParentID: 1,
        Progress: 30, work: 10, Resources: [{ ResourceId: 1, Unit: 50 }]
    },
    {
        TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2019'), Duration: 4, ParentID: 1,
        Resources: [{ ResourceId: 2, Unit: 70 }], Progress: 30, work: 20
    },
    {
        TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2019'), Duration: 1, ParentID: 1,
        Resources: [{ ResourceId: 3, Unit: 25 }, { ResourceId: 1, Unit: 75 }], Progress: 30, work: 10,
    },
    {
        TaskID: 5,
        TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019'),
    }, {
        TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'),
        Duration: 3, ParentID: 5, Progress: 30, Resources: [{ ResourceId: 4, Unit: 50 }, { ResourceId: 2, Unit: 70 }], work: 30
    },
    {
        TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, ParentID: 5,
        Resources: [{ ResourceId: 6, Unit: 40 }], Progress: 30, work: 40
    },
    {
        TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'),
        Duration: 2, ParentID: 5, Resources: [{ ResourceId: 5, Unit: 75 }], Progress: 30, work: 60,
    },
    {
        TaskID: 9, TaskName: 'Sign contract', StartDate: new Date('04/01/2019'), Duration: 1,
        Progress: 30,
    }
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Selection, Toolbar } from '@syncfusion/ej2-react-gantt';
function App (){
    const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            resourceInfo: 'Resources',
            child: 'subtasks'
        };
        const resourceFields = {
            id: 'ResourceId',
            name: 'ResourceName',
            unit: 'Unit',
            group: 'ResourceGroup'
        };
        const editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        };
        const toolbar = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'PrevTimeSpan', 'NextTimeSpan', 'ExpandAll', 'CollapseAll', 'Search'];
        const labelSettings = {
            rightLabel: 'Resources',
            leftLabel: 'TaskName',
            taskLabel: '${Progress}%'
        };
        const splitterSettings = {
            columnIndex: 3
        };
        const projectStartDate = new Date('03/22/2019');
       const projectEndDate = new Date('05/18/2019');
        return <GanttComponent id='root' dataSource = { data } treeColumnIndex = { 1} viewType = 'ResourceView' allowSelection = { true}  allowResizing = { true} highlightWeekends = { true} toolbar = { toolbar } editSettings = { editSettings } projectStartDate = { projectStartDate } projectEndDate = { projectEndDate } resourceFields = {resourceFields } taskFields = { taskFields } labelSettings = { labelSettings } splitterSettings = { splitterSettings } height = '410px' resources = { resourceCollection } >
            <ColumnsDirective>
            <ColumnDirective field= 'TaskID' visible= {false} > </ColumnDirective>
            <ColumnDirective field= 'TaskName'  headerText= 'Task Name'  width= '180' > </ColumnDirective>
            <ColumnDirective field= 'work'  headerText= 'Work' > </ColumnDirective>
            <ColumnDirective field= 'Progress' > </ColumnDirective>
            <ColumnDirective field= 'ResourceGroup'  headerText= 'Group' > </ColumnDirective>
            <ColumnDirective field= 'StartDate' > </ColumnDirective>
            <ColumnDirective field= 'Duration' > </ColumnDirective>
            </ColumnsDirective>
            <Inject services={[ Toolbar, Edit, Selection ]}/>
            </GanttComponent>;
};
ReactDOM.render(<App />, document.getElementById('root'));
let resourceCollection: object[] = [
    { ResourceId: 1, ResourceName: 'Martin Tamer', ResourceGroup: 'Planning Team'},
    { ResourceId: 2, ResourceName: 'Rose Fuller', ResourceGroup: 'Testing Team' },
    { ResourceId: 3, ResourceName: 'Margaret Buchanan', ResourceGroup: 'Approval Team' },
    { ResourceId: 4, ResourceName: 'Fuller King', ResourceGroup: 'Development Team' },
    { ResourceId: 5, ResourceName: 'Davolio Fuller', ResourceGroup: 'Approval Team' },
    { ResourceId: 6, ResourceName: 'Van Jack', ResourceGroup: 'Development Team' },
];
let data = [
    {
        TaskID: 1,
        TaskName: 'Project initiation',
        StartDate: new Date('03/29/2019'),
        EndDate: new Date('04/21/2019'),
    }, {
        TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 2, ParentID: 1,
        Progress: 30, work: 10, Resources: [{ ResourceId: 1, Unit: 50 }]
    },
    {
        TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2019'), Duration: 4, ParentID: 1,
        Resources: [{ ResourceId: 2, Unit: 70 }], Progress: 30, work: 20
    },
    {
        TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2019'), Duration: 1, ParentID: 1,
        Resources: [{ ResourceId: 3, Unit: 25 }, { ResourceId: 1, Unit: 75 }], Progress: 30, work: 10,
    },
    {
        TaskID: 5,
        TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019'),
    }, {
        TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'),
        Duration: 3, ParentID: 5, Progress: 30, Resources: [{ ResourceId: 4, Unit: 50 }, { ResourceId: 2, Unit: 70 }], work: 30
    },
    {
        TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3, ParentID: 5,
        Resources: [{ ResourceId: 6, Unit: 40 }], Progress: 30, work: 40
    },
    {
        TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'),
        Duration: 2, ParentID: 5, Resources: [{ ResourceId: 5, Unit: 75 }], Progress: 30, work: 60,
    },
    {
        TaskID: 9, TaskName: 'Sign contract', StartDate: new Date('04/01/2019'), Duration: 1,
        Progress: 30,
    }
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Selection, Toolbar } from '@syncfusion/ej2-react-gantt';
function App (){
    const taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            resourceInfo: 'Resources',
            parentID: 'ParentID'
        };
        const resourceFields = {
            id: 'ResourceId',
            name: 'ResourceName',
            unit: 'Unit',
            group: 'ResourceGroup'
        };
        const editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        };
        const toolbar = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'PrevTimeSpan', 'NextTimeSpan', 'ExpandAll', 'CollapseAll', 'Search'];
        const labelSettings = {
            rightLabel: 'Resources',
            leftLabel: 'TaskName',
            taskLabel: '${Progress}%'
        };
        const splitterSettings = {
            columnIndex: 3
        };
        const projectStartDate = new Date('03/22/2019');
       const projectEndDate = new Date('05/18/2019');
        return <GanttComponent id='root' dataSource = { data } treeColumnIndex = { 1} viewType = 'ResourceView' allowSelection = { true}  allowResizing = { true} highlightWeekends = { true} toolbar = { toolbar } editSettings = { editSettings } projectStartDate = { projectStartDate } projectEndDate = { projectEndDate } resourceFields = {resourceFields } taskFields = { taskFields } labelSettings = { labelSettings } splitterSettings = { splitterSettings } height = '410px' resources = { resourceCollection } >
            <ColumnsDirective>
            <ColumnDirective field= 'TaskID' visible= {false} > </ColumnDirective>
            <ColumnDirective field= 'TaskName'  headerText= 'Task Name'  width= '180' > </ColumnDirective>
            <ColumnDirective field= 'work'  headerText= 'Work' > </ColumnDirective>
            <ColumnDirective field= 'Progress' > </ColumnDirective>
            <ColumnDirective field= 'ResourceGroup'  headerText= 'Group' > </ColumnDirective>
            <ColumnDirective field= 'StartDate' > </ColumnDirective>
            <ColumnDirective field= 'Duration' > </ColumnDirective>
            </ColumnsDirective>
            <Inject services={[ Toolbar, 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/29.1.33/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>

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.

The following code example demonstrates how to display event markers in a stacked manner in the Gantt control.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, DayMarkers, EventMarkersDirective, EventMarkerDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App (){
    const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'
  };
  const updateEventMarker = () => {
    const eventMarkerLabels = document.getElementsByClassName('e-span-label');
    const eventMarkerArrows = document.getElementsByClassName('e-gantt-right-arrow');
        const label = eventMarkerLabels[1];
        const arrow = eventMarkerArrows[1];
          label.style.top = 90 + "px";
          arrow.style.top = 100 + "px";
  };
  const actionComplete = () => {
    updateEventMarker();
  };
  const ganttRef = React.createRef();
  const dataBound = () => {
    updateEventMarker();
    ganttRef.current.fitToProject();
  };
  const eventMarkerDay1 = new Date('04/02/2019');
  const eventMarkerDay2 = new Date('04/09/2019');
  const eventMarkerDay3 = new Date('04/30/2019');
  const eventMarkerDay4 = new Date('05/20/2019');
  const projectStartDate = new Date('03/31/2019');
  const projectEndDate = new Date('07/18/2019');
        return <GanttComponent ref={ganttRef} dataSource={data} taskFields={taskFields}  height = '450px' projectStartDate = { projectStartDate } projectEndDate = { projectEndDate } actionComplete={actionComplete} dataBound = {dataBound}>
        <EventMarkersDirective>
              <EventMarkerDirective day={eventMarkerDay1} cssClass='e-custom-event-marker'  label='Research phase research phase research phase' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay2} cssClass='e-custom-event-marker'  label='Design phase' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay3} cssClass='e-custom-event-marker'  label='Production phase' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay4} cssClass='e-custom-event-marker'  label='Sales and marketing phase' ></EventMarkerDirective>
        </EventMarkersDirective>
            <Inject services={[DayMarkers]} />
        </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, DayMarkers, EventMarkersDirective, EventMarkerDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App (){
    const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'
  };
  const updateEventMarker = () => {
    const label = document.getElementsByClassName('e-span-label')[1] as HTMLElement;
    const arrow = document.getElementsByClassName('e-gantt-right-arrow')[1] as HTMLElement;
    label.style.top = '100px';
    arrow.style.top = '110px';
  };
  const actionComplete = () => {
    updateEventMarker();
  };
  const ganttRef = React.createRef();
  const dataBound = () => {
    updateEventMarker();
    ganttRef.current.fitToProject();
  };
  const eventMarkerDay1 = new Date('04/01/2019');
  const eventMarkerDay2 = new Date('04/09/2019');
  const eventMarkerDay3 = new Date('04/30/2019');
  const eventMarkerDay4 = new Date('05/20/2019');
  const projectStartDate = new Date('03/31/2019');
  const projectEndDate = new Date('07/18/2019');
        return <GanttComponent ref={ganttRef} dataSource={data} taskFields={taskFields} height = '450px' projectStartDate = { projectStartDate } projectEndDate = { projectEndDate } actionComplete={actionComplete} dataBound = {dataBound}>
        <EventMarkersDirective>
        <EventMarkerDirective day={eventMarkerDay1} cssClass='e-custom-event-marker'  label='Research phase research phase research phase' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay2} cssClass='e-custom-event-marker'  label='Design phase' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay3} cssClass='e-custom-event-marker'  label='Production phase' ></EventMarkerDirective>
              <EventMarkerDirective day={eventMarkerDay4} cssClass='e-custom-event-marker'  label='Sales and marketing phase' ></EventMarkerDirective>
        </EventMarkersDirective>
            <Inject services={[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/29.1.33/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
		
       .e-gantt .e-gantt-chart .e-custom-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='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>