DHTMLX Vue Gantt

DHTMLX Vue Gantt is a Vue wrapper for the DHTMLX Gantt library.

It provides a declarative way to integrate DHTMLX Gantt scheduling features into Vue apps. Use Vue components in templates, pass reactive props, and handle chart edits through wrapper callbacks.

Important: this npm package is a trial build intended for evaluation only. For access to commercial licenses and technical support, please request an evaluation on our website: https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vue/download.shtml

Getting started

Install package

Professional Evaluation version:

npm install @dhtmlx/trial-vue-gantt

And initialize:

<!-- src/components/GanttChart.vue -->
<script setup lang="ts">
import { ref } from "vue";
import VueGantt, {
  type Link,
  type Task,
  type VueGanttDataConfig
} from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";

import { links as initialLinks, tasks as initialTasks } from "../demoData";

const tasks = ref<Task[]>(initialTasks);
const links = ref<Link[]>(initialLinks);

const data: VueGanttDataConfig = {
  save: (entity, action, item, id) => {
    console.log("save", { entity, action, item, id });
  }
};
</script>

<template>
  <div style="height: 100%; width: 100%;">
    <VueGantt :tasks="tasks" :links="links" :data="data" />
  </div>
</template>

<!-- src/App.vue -->
<script setup lang="ts">
import GanttChart from "./components/GanttChart.vue";
</script>

<template>
  <div style="height: 100vh; width: 100vw;">
    <GanttChart />
  </div>
</template>

demoData.ts is an example tasks/links dataset. Replace it with your own project data.

Requirements

• Vue 3.x or newer

Complete guides

• https://docs.dhtmlx.com/gantt/integrations/vue/

Features

• Vue components in templates of grid cells, headers, timelines
• easy customization with Vue components
• compatibility with Pinia-based state management
• TypeScript support
• 4 types of tasks linking: finish-to-start, start-to-start, finish-to-finish, start-to-finish
• dragging and dropping multiple tasks horizontally
• multi-task selection
• backward planning
• tasks filtering
• resources filtering
• inline editing
• managing editability/readonly modes of individual tasks
• undo/redo functionality
• configurable columns in the grid
• customizable time scale and task edit form
• progress percent coloring for tasks
• 7 different skins
• online export to PDF, PNG, Excel, iCal, and MS Project
• 32 locales
• keyboard navigation
• resource management
• critical path calculation
• auto scheduling

License

DHTMLX Gantt for Vue v.9.1.4 Professional Evaluation

This software is covered by DHTMLX Evaluation License. Contact [email protected] to get a proprietary license. Usage without proper license is prohibited.

(c) XB Software

Useful links

• DHTMLX Vue Gantt product page
• DHTMLX JS Gantt product page
• Official documentation
• Online samples
• Video tutorials
• Export services
• List of available integrations
• Support forum

Follow us

• Read us on Medium

• Follow us on LinkedIn

• Follow us on X

• Like our page on Facebook