Change non-working day in Vue Gantt Chart Component
Non‑working days (weekends) are used to represent non‑productive days in a project. You can configure non‑working days in a week using the workWeek property of the Gantt Chart component.
<template>
<div>
<ejs-gantt id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :highlightWeekends='true' :workWeek="workWeek"></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',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const workWeek = ["Sunday","Monday","Tuesday","Wednesday","Thursday"];
provide('gantt', [ DayMarkers ]);
</script><template>
<div>
<ejs-gantt id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :highlightWeekends='true' :workWeek="workWeek"></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',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
workWeek: ["Sunday","Monday","Tuesday","Wednesday","Thursday"],
};
},
provide: {
gantt: [ DayMarkers ]
}
};
</script>By default, Saturdays and Sundays are considered non‑working days (weekends) in a project.
You can make weekends working days by setting theincludeWeekendproperty totruein the Gantt Chart component.