Holidays in Vue Gantt component

25 May 20244 minutes to read

Non-working days in a project can be displayed in the Gantt component using the holidays property. Each holiday can be defined with the following properties:

  • from: Defines start date of the holiday(s).
  • to: Defines end date of the holiday(s).
  • label: Defines the description or label for the holiday.
  • cssClass: Formats the holidays label in the Gantt chart.

To highlight the days, inject the DayMarkers module in the provide section.

The following code example shows how to display the non-working days in the Gantt component.

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :holidays = "holidays"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, DayMarkers } from "@syncfusion/ej2-vue-gantt";
import { projectNewData  } from './data-source.js';
const data = projectNewData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const holidays = [{
    from: "04/04/2019",
    to:"04/05/2019",
    label: " Public holidays",
    cssClass:"e-custom-holiday"
},
{
    from: "04/12/2019",
    to:"04/12/2019",
    label: " LOcal holidays",
    cssClass:"e-custom-holiday"
    }];
provide('gantt',  [DayMarkers]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :holidays = "holidays"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, DayMarkers } from "@syncfusion/ej2-vue-gantt";
import { projectNewData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,
},
  data: function() {
      return{
        data: projectNewData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        holidays: [{
            from: "04/04/2019",
            to:"04/05/2019",
            label: " Public holidays",
            cssClass:"e-custom-holiday"
        },
        {
            from: "04/12/2019",
            to:"04/12/2019",
            label: " LOcal holidays",
            cssClass:"e-custom-holiday"
            }]
      };
  },
  provide: {
      gantt: [DayMarkers]
  }
};
</script>