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
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.