Vue-Gantt

Appearance

Getting started ​

Install ​

sh
npm install @jyoketsu/vue-gantt
sh
pnpm add @jyoketsu/vue-gantt
sh
yarn add @jyoketsu/vue-gantt
sh
bun add @jyoketsu/vue-gantt

Next, initialize the plugin at the entry point of your application (typically in src/main.js):

js
import { createApp } from "vue"
import App from "./App.vue"
...
import vuegantt from '@jyoketsu/vue-gantt'
...
createApp(App)
  .use(vuegantt)
  .mount('#app')

Basic usage ​

vue
<template>
  <div class="w-full h-[142px] overflow-hidden">
    <vue-gantt :data="data" start-date="2024-09-23" end-date="2025-09-23" />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const data = reactive([
  {
    name: "Xu Quan",
    projects: [
      { name: "Project 1", startDate: "2024-09-24", endDate: "2024-09-30" },
      { name: "Project 2", startDate: "2024-10-01", endDate: "2024-10-02" },
      { name: "Project 3", startDate: "2024-10-03", endDate: "2024-10-15" },
    ],
  },
  {
    name: "Lei Yufei",
    projects: [
      { name: "Project 1", startDate: "2024-10-05", endDate: "2024-10-28" },
      { name: "Project 2", startDate: "2024-12-12", endDate: "2025-01-09" },
      { name: "Project 3", startDate: "2025-02-01", endDate: "2025-02-27" },
    ],
  },
  {
    name: "Jing Yixian",
    projects: [
      { name: "Project 1", startDate: "2024-09-24", endDate: "2024-09-30" },
      { name: "Project 2", startDate: "2024-10-01", endDate: "2024-10-02" },
      { name: "Project 3", startDate: "2024-10-03", endDate: "2024-10-15" },
    ],
  },
  {
    name: "Liu Xinwei",
    projects: [
      { name: "Project 1", startDate: "2024-07-20", endDate: "2024-08-18" },
      { name: "Project 2", startDate: "2024-11-10", endDate: "2024-12-07" },
      { name: "Project 3", startDate: "2025-01-15", endDate: "2025-02-12" },
    ],
  },
]);
</script>

The result shoud look like this:

Name
Xu Quan
Lei Yufei
Jing Yixian
Liu Xinwei
09/23
09/30
10/07
10/14
10/21
10/28
11/04
11/11
11/18
11/25
12/02
12/09
12/16
12/23
12/30
01/06
01/13
01/20
01/27
02/03
02/10
02/17
02/24
03/03
03/10
03/17
03/24
03/31
04/07
04/14
04/21
04/28
05/05
05/12
05/19
05/26
06/02
06/09
06/16
06/23
06/30
07/07
07/14
07/21
07/28
08/04
08/11
08/18
08/25
09/01
09/08
09/15
09/22
Project 1
Project 2
Project 3
Project 1
Project 2
Project 3
Project 1
Project 2
Project 3
Project 2
Project 3