Vue Gantt Chart Component (DayPilot)

NPM Package

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

npm install 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 link at npm.daypilot.org.

Supported Vue versions

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

Supported Vue versions:

Tutorial

Vue Gantt Chart Component Example (Composition API)

This is a basic example of the Gantt Chart component usage with Vue Composition API:

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

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

// Reactive configuration object
const config = reactive({
  timeHeaders: [{ groupBy: 'Month' }, { groupBy: 'Day', format: 'd' }],
  scale: 'Day',
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  // ...
});

// Reference to the DayPilotGantt component
const ganttRef = ref(null);

// Computed property to access the DayPilot.Gantt object
const gantt = computed(() => ganttRef.value?.control);
</script>

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

Vue Gantt Chart Component Example (Options API)

Here you can see how to use the Vue Gantt Chart with 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(),      
        // ...
      },
    }
  },
  components: {
    DayPilotGantt
  },
  computed: {
    // DayPilot.Gantt object - https://api.daypilot.org/daypilot-gantt-class/
    gantt: function () {
      return this.$refs.gantt.control;
    }
  },
}
</script>