Eventmarkers in Vue Gantt component
16 Mar 20232 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.
<template>
<div>
<ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :eventMarkers = "eventMarkers"></ejs-gantt>
</div>
</template>
<script>
import Vue from "vue";
import { GanttPlugin, DayMarkers } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
Vue.use(GanttPlugin);
export default {
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>