vue js interactive gantt chart component

NPM Package

You can get the NPM installation link at

yarn add

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

Supported Vue versions

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

Supported Vue versions:



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

  <DayPilotGantt id="dp" :config="config" ref="gantt" />

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

export default {
  name: 'Gantt',
  data: function() {
    return {
      config: {
        timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
        scale: "Day",
        // ...
  components: {
  computed: {
    // DayPilot.Gantt object -
    gantt: function () {
      return this.$refs.gantt.control;

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