Eventmarkers in Angular Gantt component

19 Sep 20224 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 DayMarkersService in the provider section of AppModule.

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { projectNewData } from './data';

    selector: 'app-root',
       `<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [eventMarkers]="eventMarkers"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
export class AppComponent{
    // Data for Gantt
    public data: object[];
    public taskSettings: object;
    public eventMarkers : object[];
    public ngOnInit(): void {
        this.data = projectNewData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        this.eventMarkers = [
                day: new Date('04/09/2019'),
                label: 'Research phase'
            }, {
                day: new Date('04/30/2019'),
                label: 'Design phase'
            }, {
                day: new Date('05/23/2019'),
                label: 'Production phase'
            }, {
                day: new Date('06/20/2019'),
                label: 'Sales and marketing phase'
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { DayMarkersService } from '@syncfusion/ej2-angular-gantt';

 * Module
    imports: [
        BrowserModule, GanttModule
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayMarkersService]
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';