Vue Gantt Chart

Vue Gantt Chart Component

The Vue Gantt Chart component is included in DayPilot Pro for JavaScript.

• Gantt Chart Features

• Gantt Chart Online Demo

Supported Vue Versions

The daypilot-pro-vue package supports:

• Vue 2

• Vue 3

Tutorials

• Vue.js Gantt Chart Tutorial
  Build a Vue 3 Gantt chart with static task data, milestones, dependency links, and additional row header columns.

Online Configurator

You can use the Gantt Chart UI Builder to configure the Vue Gantt component and generate a downloadable starter project.

How to Install the Vue Gantt Chart Component?

Install daypilot-pro-vue from npm.daypilot.org:

npm install https://npm.daypilot.org/daypilot-pro-vue/trial/xxxx.y.zzzz.tar.gz

Use the current package URL from npm.daypilot.org.

How to Add the Component to Your Application?

Import DayPilotGantt from daypilot-pro-vue and render the component in your template:

import { DayPilotGantt } from 'daypilot-pro-vue'

<template>
  <DayPilotGantt :config="config" :tasks="tasks" :links="links" ref="ganttRef" />
</template>

For direct access to the underlying DayPilot.Gantt object, keep a Vue ref to the component and use ganttRef.value.control after initialization.

How to Configure the Gantt Chart?

Use the :config attribute to point the component to a configuration object. The object can include standard Gantt properties and event handlers.

const config = reactive({
  columns: [
    { title: 'Task', width: 132, property: 'text' },
    { title: 'Lead', width: 76, property: 'owner' },
    { title: 'State', width: 74, property: 'status' }
  ],
  timeHeaders: [{ groupBy: 'Month' }, { groupBy: 'Day', format: 'd' }],
  scale: 'Day',
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  taskMoveHandling: 'Update',
  onTaskMoved: args => {
    args.control.message('Task moved: ' + args.task.text())
  }
})

The columns property lets you display additional task metadata in the row header area. In this example, the chart shows custom owner and status values next to the task name.

How to Use Direct Vue 3 Component Attributes?

In the latest DayPilot Pro version, you can also pass Gantt properties and handlers directly as Vue component attributes and listeners:

<template>
  <DayPilotGantt
    :columns="columns"
    :tasks="tasks"
    :links="links"
    :timeHeaders="timeHeaders"
    scale="Day"
    :days="days"
    :startDate="startDate"
    @taskMoved="onTaskMoved"
  />
</template>

This pattern works well when you want to keep your reactive state split across multiple Vue refs instead of putting all settings into a single config object.

How to Load Tasks and Milestones?

Bind Gantt tasks using the :tasks attribute. Nested tasks use children, and milestones use type: "Milestone".

const tasks = ref([
  {
    id: 'planning',
    text: 'Planning',
    owner: 'Elena',
    status: 'Active',
    expanded: true,
    children: [
      {
        id: 'kickoff',
        start: day(0),
        end: day(2),
        text: 'Kickoff',
        owner: 'Elena',
        status: 'Done',
        complete: 100
      },
      {
        id: 'approval',
        start: day(5),
        type: 'Milestone',
        text: 'Scope sign-off',
        owner: 'Sponsor',
        status: 'Next'
      }
    ]
  },
  // ...
])

See also Gantt tasks and Gantt milestones. The underlying task object structure is documented in DayPilot.Task.data.

How to Load Dependency Links?

Bind dependency links using the :links attribute. Each link references two task IDs and specifies a dependency type.

const links = ref([
  { from: 'kickoff', to: 'requirements', type: 'FinishToStart' },
  { from: 'requirements', to: 'approval', type: 'FinishToStart' },
  { from: 'approval', to: 'wireframes', type: 'FinishToStart' },
  // ...
])

See also Gantt links and Gantt link types.

How to Use Row Header Columns?

Use the columns property to define multiple row header columns:

const columns = [
  { title: 'Task', width: 132, property: 'text' },
  { title: 'Lead', width: 76, property: 'owner' },
  { title: 'State', width: 74, property: 'status' }
]

Each column can display one property from the current task. This is the quickest way to show extra task metadata without customizing the row header markup.

How to Use Vue Templates for Row Headers?

In the latest DayPilot Pro version, you can customize row header cells using a Vue template. The slot receives the current task and the row header column index x.

<DayPilotGantt :columns="columns" :tasks="tasks">
  <template #rowHeader="{ task, x }">
    column {{x}}: {{ task.text() }}
  </template>
</DayPilotGantt>

Use this approach when you need row-header output that is more complex than a simple property-to-column mapping.

How to Use Vue Templates for Tasks?

You can also customize the task bar content using the #task slot. The slot receives the current task.

<DayPilotGantt :tasks="tasks">
  <template #task="{ task }">
    {{ task.text() }} {{ task.complete }}%
  </template>
</DayPilotGantt>

Task templates let you display custom text, progress, icons, or other derived values inside the task bars.

Vue Gantt Chart Component Example (Composition API)

This example shows a compact Vue 3 setup that combines a configuration object with reactive task and link data:

<template>
  <DayPilotGantt
    :config="config"
    :tasks="tasks"
    :links="links"
    ref="ganttRef"
  />
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { DayPilot, DayPilotGantt } from 'daypilot-pro-vue'

const startDate = DayPilot.Date.today().firstDayOfMonth()
const ganttRef = ref(null)
const gantt = computed(() => ganttRef.value?.control ?? null)
const tasks = ref([])
const links = ref([])

const config = reactive({
  columns: [
    { title: 'Task', width: 132, property: 'text' },
    { title: 'Lead', width: 76, property: 'owner' },
    { title: 'State', width: 74, property: 'status' }
  ],
  timeHeaders: [{ groupBy: 'Month' }, { groupBy: 'Day', format: 'd' }],
  scale: 'Day',
  days: DayPilot.Date.today().daysInMonth(),
  startDate
})

onMounted(() => {
  tasks.value = [
    // ...
  ]
  links.value = [
    // ...
  ]
  gantt.value?.message('Welcome!')
})
</script>

Vue Gantt Chart Component Example (Options API)

The following example shows the same component using the Vue Options API:

<template>
  <DayPilotGantt :config="config" ref="gantt" />
</template>

<script>
import {DayPilot, DayPilotGantt} from 'daypilot-pro-vue'

export default {
  name: 'Gantt',
  data: function() {
    return {
      config: {
        timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
        scale: "Day",
        days: DayPilot.Date.today().daysInMonth(),
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        tasks: [ /* ... */ ],
        links: [ /* ... */ ],
        // ...
      },
    }
  },
  components: {
    DayPilotGantt
  },
  computed: {
    // DayPilot.Gantt object - https://api.daypilot.org/daypilot-gantt-class/
    gantt: function () {
      return this.$refs.gantt.control;
    }
  },
}
</script>