Event markers in Vue Gantt component

11 Jun 20244 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 in the provide section.

Composition API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :eventMarkers = "eventMarkers"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { GanttComponent as EjsGantt, DayMarkers } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';
const data = editingData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    resourceInfo: 'resources',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks'
};
const eventMarkers = [
    {
        day: '04/10/2019',
        cssClass: 'e-custom-event-marker',
        label: 'Project approval and kick-off'
    }
];
provide('gantt', [DayMarkers]);
</script>

Options API (~/src/App.vue)

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :eventMarkers = "eventMarkers"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, DayMarkers } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: editingData,
        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'
            }
        ]
      };
  },
  provide: {
      gantt: [DayMarkers]
  }
};
</script>