# gantt-holidays

> Gantt timeline marks holidays and excludes them from working-day task calculations.

**Framework:** vue  **Component:** Gantt  **Variant:** holidays

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/gantt-holidays.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-holidays/Gantt.vue

```vue
<template>
    <div class="col-lg-12 control-section">
        <div>
            <ejs-gantt ref='gantt' id="Holidays" :dataSource="data" :height="height" :rowHeight="46" :taskbarHeight="25"
                :highlightWeekends='true' :taskFields="taskFields" :labelSettings="labelSettings" :columns="columns"
                :treeColumnIndex="1" :holidays="holidays" :splitterSettings="splitterSettings"
                :projectStartDate="projectStartDate" :projectEndDate="projectEndDate">
            </ejs-gantt>
        </div>

    </div>
</template>
<script>
import { GanttComponent, Selection, DayMarkers } from "@syncfusion/ej2-vue-gantt";

const projectNewData = [
    { TaskID: 1, TaskName: "Product concept", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025") },
    { TaskID: 2, TaskName: "Define the product usage", StartDate: new Date("04/02/2025"), EndDate: new Date("04/08/2025"), Duration: 1, Progress: 30, ParentId: 1, BaselineStartDate: new Date("04/02/2025"), BaselineEndDate: new Date("04/02/2025") },
    { TaskID: 3, TaskName: "Define the target audience", StartDate: new Date("04/02/2025"), EndDate: new Date("04/04/2025"), Duration: 2, Progress: 40, ParentId: 1 },
    { TaskID: 4, TaskName: "Prepare product sketch and notes", StartDate: new Date("04/05/2025"), Duration: 2, Progress: 30, ParentId: 1, Predecessor: "2" },
    { TaskID: 5, TaskName: "Concept approval", StartDate: new Date("04/08/2025"), EndDate: new Date("04/08/2025"), Duration: 0, ParentId: 1, Predecessor: "3,4", Indicators: [{ date: new Date("04/07/2025"), name: "Design Phase", tooltip: "Design phase completed", iconClass: "okIcon e-icons" }] },
    { TaskID: 6, TaskName: "Market research", StartDate: new Date("04/09/2025"), EndDate: new Date("04/18/2025"), Progress: 30, BaselineStartDate: new Date("04/09/2025"), BaselineEndDate: new Date("04/09/2025") },
    { TaskID: 7, TaskName: "Demand analysis", Progress: 40, ParentId: 6 },
    { TaskID: 8, TaskName: "Customer strength", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, Progress: 30, ParentId: 7, Predecessor: "5", BaselineStartDate: new Date("04/12/2025"), BaselineEndDate: new Date("04/13/2025") },
    { TaskID: 9, TaskName: "Market opportunity analysis", StartDate: new Date("04/09/2025"), EndDate: new Date("04/12/2025"), Duration: 4, ParentId: 7, Predecessor: "5" },
    { TaskID: 10, TaskName: "Competitor analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 30, ParentId: 6, Predecessor: "7,8" },
    { TaskID: 11, TaskName: "Product strength analysis", StartDate: new Date("04/15/2025"), EndDate: new Date("04/18/2025"), Duration: 4, Progress: 40, ParentId: 6, Predecessor: "9" },
    { TaskID: 12, TaskName: "Research completed", StartDate: new Date("04/18/2025"), EndDate: new Date("04/18/2025"), Duration: 0, Progress: 30, ParentId: 6, Predecessor: "10", Indicators: [{ date: new Date("04/20/2025"), name: "Research completed", tooltip: "Research completed", iconClass: "description e-icons" }] },
    { TaskID: 13, TaskName: "Product design and development", StartDate: new Date("04/19/2025"), EndDate: new Date("05/16/2025") },
    { TaskID: 14, TaskName: "Functionality design", StartDate: new Date("04/19/2025"), EndDate: new Date("04/23/2025"), Duration: 4, Progress: 30, ParentId: 13, Predecessor: "12" }
];

export default {
    components: {
        'ejs-gantt': GanttComponent
    },
    data: function () {
        return {
            data: projectNewData,
            height: '650px',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                parentID: 'ParentId'
            },
            columns: [
                { field: 'TaskID', visible: false, width: 80 },
                { field: 'TaskName', width: 280 },
                { field: 'StartDate' },
                { field: 'Duration' },
                { field: 'Progress' },
                { field: 'Predecessor' }
            ],
            labelSettings: {
                rightLabel: 'TaskName'
            },
            splitterSettings: {
                columnIndex: 1
            },
            holidays: [
                {
                    from: new Date('03/28/2025'),
                    to: new Date('03/28/2025'),
                    label: 'Good Friday'
                },
                {
                    from: new Date('03/30/2025'),
                    to: new Date('03/30/2025'),
                    label: 'Easter Sunday'
                },
                {
                    from: new Date('05/26/2025'),
                    to: new Date('05/26/2025'),
                    label: 'Memorial Day'
                },
                {
                    from: new Date('07/04/2025'),
                    to: new Date('07/04/2025'),
                    label: 'Independence Day'
                },
            ],
            projectStartDate: new Date('03/25/2025'),
            projectEndDate: new Date('07/20/2025')
        };
    },
    provide: {
        gantt: [DayMarkers, Selection]
    }
}
</script>
```

### src/components/gantt-holidays/GanttView.vue

```vue
<template>
  <Gantt />
</template>

<script setup>
import Gantt from '../../components/Gantt.vue'
</script>
```