Vue Gantt Chart

NPM Package

You can get the NPM installation link at npm.daypilot.org:

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

Replace xxxx.y.zzzz with the current version number - you can get the yarn link at npm.daypilot.org.

Supported Vue versions

The daypilot-pro-vue package is included in DayPilot Pro for JavaScript.

Supported Vue versions:

• Vue 2
• Vue 3 (since 2020.4.4807)

Tutorial

• Vue.js Gantt Chart Tutorial

Example

After installing the daypilot-pro-vue package, you can add the Gantt chart to your application using DayPilotGantt component:

<template>
  <DayPilotGantt id="dp" :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(),      
        // ...
      },
    }
  },
  components: {
    DayPilotGantt
  },
  computed: {
    // DayPilot.Gantt object - https://api.daypilot.org/daypilot-gantt-class/
    gantt: function () {
      return this.$refs.gantt.control;
    }
  },
}
</script>

The :config attribute lets you configure the Gantt chart component - you can use all standard properties an events.