# DHTMLX Vue Gantt

[![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
[![npm: v.10.0.1](https://img.shields.io/badge/npm-v.10.0.1-blue.svg)](https://www.npmjs.com/package/@dhtmlx/trial-vue-gantt)
[![License: Evaluation](https://img.shields.io/badge/license-Evaluation-important.svg)](https://dhtmlx.com/docs/products/license.shtml?eval)


[DHTMLX Vue Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vue/) is a Vue wrapper for the [DHTMLX Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt/) 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

<a name="getting-started"></a>
## Getting started

**Install package**

Professional Evaluation version:

~~~bash
npm install @dhtmlx/trial-vue-gantt
~~~


And initialize:

~~~vue
<!-- 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>
~~~

~~~vue
<!-- 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/



<a name="features"></a>
## 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


<a name="license"></a>
## License

DHTMLX Gantt for Vue v.10.0.1 Professional Evaluation

This software is covered by DHTMLX Evaluation License. Contact sales@dhtmlx.com to get a proprietary license. Usage without proper license is prohibited.

(c) XB Software


<a name="links"></a>
## Useful links

- [DHTMLX Vue Gantt product page](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vue/)
- [DHTMLX JS Gantt product page](https://dhtmlx.com/docs/products/dhtmlxGantt/)
- [Official documentation](https://docs.dhtmlx.com/gantt/)
- [Online samples](https://docs.dhtmlx.com/gantt/samples/)
- [Video tutorials](https://www.youtube.com/watch?v=cCvULTQxPfg&list=PLKS_XdyIGP4MEW6yvvQUZT8vJKHVOq2S0)
- [Export services](https://dhtmlx.com/docs/products/dhtmlxGantt/export.shtml)
- [List of available integrations](https://dhtmlx.com/docs/products/integrations/)
- [Support forum](https://forum.dhtmlx.com/c/gantt)

<a name="followus"></a>
## Follow us

- Read us on [Medium](https://medium.com/@dhtmlx)

- Follow us on [LinkedIn](https://www.linkedin.com/company/dhtmlx-ltd-/)

- Follow us on [X](https://x.com/dhtmlx)

- Like our page on [Facebook](https://www.facebook.com/dhtmlx/)