@infectoone/vue-ganttastic

    2.0.4 • Public • Published

    Vue Ganttastic

    Vue Ganttastic logo

    Vue Ganttastic is a simple, interactive and highly customizable Gantt chart component for Vue 3.

    Features

    • Vue 3 support
    • TypeScript support (ships with out of the box type declarations)
    • Interactivity (dynamic, moveable, pushable bars with various event handlers)
    • Reactivity / Responsiveness (bars will be properly repositioned on width resize)
    • Customization options (chart and bar styling, changes in behavior, slots, event handlers etc.)
    • Day.js support (uses Day.js under the hood for date-time manipulation)

    Using Vue 2? Check out Vue-Ganttastic v1.

    Quickstart

    Install using

    npm install @infectoone/vue-ganttastic
    

    Then, initalize the plugin in the starting point of your app (most likely src/main.js):

    import { createApp } from "vue"
    import App from "./App.vue"
    ...
    import ganttastic from '@infectoone/vue-ganttastic'
    ...
    createApp(App)
      .use(ganttastic)
      .mount('#app')

    This will globally register the components g-gantt-chart and g-gantt-row and you will be able to use those two components right away.

    <template>
      <g-gantt-chart
        chart-start="2021-07-12 12:00"
        chart-end="2021-07-14 12:00"
        precision="hour"
        bar-start="myBeginDate"
        bar-end="myEndDate"
      >
        <g-gantt-row
          label="My row 1"
          :bars="row1BarList"
        />
        <g-gantt-row
          label="My row 2"
          :bars="row2BarList"
        />
      </g-gantt-chart>
    </template>
    
    <script setup>
    
    import { ref } from "vue"
    
    const row1BarList = ref([
      {
        myBeginDate: "2021-07-13 13:00",
        myEndDate: "2021-07-13 19:00",
        ganttBarConfig: {    // each bar must have a nested ganttBarConfig object ...
          id: "unique-id-1", // ... and a unique "id" property
          label: "Lorem ipsum dolor"
        }
      }
    ])
    const row2BarList = ref([
      {
        myBeginDate: "2021-07-13 00:00",
        myEndDate: "2021-07-14 02:00",
        ganttBarConfig: {
          id: "another-unique-id-2",
          hasHandles: true,
          label: "Hey, look at me",
          style: {     // arbitrary CSS styling for your bar
            background: "#e09b69",
            borderRadius: "20px",
            color: "black"
          }
        }
      }
    ])
    </script>

    Guide and Docs

    For further guides and references, check out the official docs.

    About

    License MIT
    Author: Marko Žunić, BSc
    GitHub Repository

    Support the project

    Vue Ganttastic is a free open-source project I work on in my spare time. Buy me a beer and let's give a toast to open-source developers! 🍻

    Screenshots

    image

    image

    image

    Install

    npm i @infectoone/vue-ganttastic

    DownloadsWeekly Downloads

    61

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    71.8 kB

    Total Files

    3

    Last publish

    Collaborators

    • infectoone