Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/zunnzunn/vue-ganttastic/tree/vue-ganttastic-v1 below:

GitHub - zunnzunn/vue-ganttastic at vue-ganttastic-v1

A simple and easy-to-use Gantt chart component for Vue.js

Using Vue 3? Check out the Vue-Ganttastic v2 and the corresponding npm package.

Homepage of the project

You can install and use Vue-Ganttastic in your project using npm:

npm install vue-ganttastic

Moment.js is a peer-dependency of Vue-Ganttastic. In order for Vue-Ganttastic to work correctly, you need to install it in your project:

Import the components GGanttChart and GGanttRow.
Use g-gantt-chart in your template, pass the desired chart start and chart end time as props (chart-start and chart-end) and add g-gantt-rows to the default template slot.
Pass an array containing your bar objects to every row using the bars prop, while specifying the name of the properties in your bar objects that stand for the bar start and bar end time using the props bar-start and bar-end

For more detailed information, such as how to style the bars or additional configuration options, please refer to the docs on the project's homepage (coming soon).

The following code showcases a simple usage example in a .vue SFC (Single File Component)

<template>
  ...

  <g-gantt-chart
    :chart-start="myChartStart"
    :chart-end="myChartEnd"
  >
    <g-gantt-row
      v-for="row in rows"
      :key="row.label"
      :label="row.label"
      :bars="row.bars"
      bar-start="myStart"
      bar-end="myEnd"
    />
  </g-gantt-chart>

  ...
</template>

<script>

import {GGanttChart, GGanttRow} from 'vue-ganttastic'

export default {

  ...

  components:{
    GGanttChart,
    GGanttRow
  },

  data(){
    return {
      myChartStart: "2020-03-01 00:00",
      myChartEnd: "2020-03-03 00:00",
      rows: [
        {
          label: "My row #1",
          bars: [
            {
              myStart: "2020-03-01 12:10",
              myEnd: "2020-03-01 16:35"
            }
          ]
        },
        {
          label: "My row #2",
          bars: [
            {
              myStart: "2020-03-02 01:00",
              myEnd: "2020-03-02 12:00"
            },
            {
              myStart: "2020-03-02 13:00",
              myEnd: "2020-03-02 22:00"
            }
          ]
        }
      ]
    }
  }

  ...

}
</script>

1. Clone the project

2. Install the Vue CLI service, if you don't already have it installed:

     npm install -g @vue/cli
     npm install -g @vue/cli-service-global
   

3. Install all dependencies:

4. Playground.vue is a dedicated Vue SFC where all Vue-Ganttastic features can be played around with and tested out. Get it running using:

     vue serve src/Playground.vue
   

5. To build the project:

     npx bili --bundle-node-modules
   

Moment.js

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4