### Install Vue Ganttastic using npm

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/getting-started.md

This snippet shows the command to install the Vue Ganttastic library using npm. Ensure you have Node.js and npm installed on your system.

```bash
npm install @infectoone/vue-ganttastic
```

--------------------------------

### Basic Vue Gantt Chart Usage

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/getting-started.md

This Vue template demonstrates the basic structure for using the `g-gantt-chart` and `g-gantt-row` components. It includes setting chart properties like `chart-start`, `chart-end`, `precision`, `bar-start`, and `bar-end`, and defining bar data for each row.

```vue
<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>
```

--------------------------------

### Initialize Vue Ganttastic Plugin in main.js

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/getting-started.md

This JavaScript code demonstrates how to import and use the Vue Ganttastic plugin in your Vue application's main entry point (e.g., src/main.js). It globally registers the `g-gantt-chart` and `g-gantt-row` components.

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

--------------------------------

### Vue Gantt Chart Bar Styling and Configuration

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/getting-started.md

This JavaScript code defines the data structure for Gantt chart bars, including custom date properties (`myBeginDate`, `myEndDate`), a required `ganttBarConfig` object with a unique `id`, and optional properties like `hasHandles`, `label`, `style` for custom CSS, and `class` for CSS classes.

```javascript
const row1BarList = ref([
  {
    myBeginDate: "2021-07-13 13:00",
    myEndDate: "2021-07-13 19:00",
    ganttBarConfig: {
      id: "unique-id-1",
      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: {
        background: "#e09b69",
        borderRadius: "20px",
        color: "#000000"
      },
      class: "foo"
    }
  }
])
```

--------------------------------

### Install Vue Ganttastic from Tarball

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/README.md

Installs the Vue Ganttastic package from a local tarball. This allows you to test a specific build of the library in another project.

```bash
npm install <name_of_the_package>.tgz
```

--------------------------------

### Vue Ganttastic Hour Chart

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/examples.md

A simple hour-based Gantt chart with two rows. It includes buttons to dynamically add or delete bars from the second row. This example demonstrates basic chart configuration and bar manipulation.

```html
<g-gantt-chart chart-start="01.01.2022 12:00" chart-end="02.01.2022 12:00" precision="hour" grid width="100%" bar-start="beginDate" bar-end="endDate" date-format="DD.MM.YYYY HH:mm">
<g-gantt-row label="My row 1" :bars="hourBarList1" highlight-on-hover/>
<g-gantt-row label="Another row" :bars="hourBarList2" highlight-on-hover/>
</g-gantt-chart>

<button @click="addHourBar()" :disabled="hourBarList2.length > 0"> Add bar </button>
<button @click="deleteHourBar()" style="margin-left: 10px" :disabled="hourBarList2.length === 0"> Delete bar </button>
```

--------------------------------

### Vue.js Bar Data Definitions for Gantt Chart

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/examples.md

This JavaScript code defines reactive arrays (using `ref` from Vue) to hold the data for Gantt chart bars. It includes examples for hour-based bars, day-based bars, and month-based bars, demonstrating how to specify `beginDate`, `endDate`, and `ganttBarConfig` properties such as `id`, `label`, `hasHandles`, `bundle`, and `style` for each bar. This data is then passed to the `g-gantt-row` components.

```javascript
import { ref } from "vue"

const hourBarList1 = ref([
  {
    beginDate: "01.01.2022 15:00",
    endDate: "01.01.2022 19:45",
    ganttBarConfig: {
      id: "8621987329",
      label: "Drag me",
      style: {
        color: "white"
      }
    }
  },
  {
    beginDate: "01.01.2022 23:00",
    endDate: "02.01.2022 08:05",
    ganttBarConfig: {
      id: "8621987322",
      label: "Drag my handles",
      hasHandles: true,
      style: {
        background: "#d66f2a",
        color: "white"
      }
    }
  }
])

const hourBarList2 = ref([])

const dayBarList1 = ref([
  {
    beginDate: "31.10.2022 15:00",
    endDate: "01.11.2022 05:45",
    ganttBarConfig: {
      id: "a621987323",
      label: "Drag me",
      style: {
        background: "#cc2a2d",
        color: "white"
      }
    }
  },
  {
    beginDate: "01.11.2022 09:00",
    endDate: "02.11.2022 08:00",
    imgSrc: "https://user-images.githubusercontent.com/28678851/148047714-301f07df-4101-48b8-9e47-1f272b290e80.png",
    ganttBarConfig: {
      id: "x21987322",
      label: "I have an image",
      hasHandles: true,
      style: {
        background: "#e2e595",
        color: "black",
        borderRadius: "40px"
      }
    }
  }
])

const monthBarList1 = ref([
  {
    beginDate: "01.01.2022 23:00",
    endDate: "02.02.2022 08:05",
    ganttBarConfig: {
      id: "5621987352",
      label: "I'm in a bundle",
      hasHandles: true,
      bundle: "myBundle",
      style: {
        background: "#1c8745",
        color: "white",
        borderRadius: "20px"
      }
    }
  }
])

const monthBarList2 = ref([
  {
    beginDate: "01.01.2022 23:00",
    endDate: "02.02.2022 08:05",
    ganttBarConfig: {
      id: "8621987321",
      label: "I'm in a bundle",
      hasHandles: true,
      bundle: "myBundle",
      style: {
        background: "#a02353",
        color: "white",
        borderRadius: "20px"
      }
    }
  },
  {
    beginDate: "15.02.2022 00:00",
    endDate: "01.03.2022 00:05",
    ganttBarConfig: {
      id: "7721987321",
      label: "Lorem ispum dolor",
      bundle: "bundle2",
      style: {
        backgroundImage: "repeating-linear-gradient(45deg, #ccc, #ccc 30px, #8221b2 30px, #8221b2 60px)",
        borderRadius: "20px",
        color: "black"
      }
    }
  }
])
const monthBarList3 = ref([{
    beginDate: "15.02.2022 00:00",
    endDate: "01.03.2022 00:05",
    ganttBarConfig: {
      id: "7721987325",
      label: "Lorem ispum dolor",
      bundle: "bundle2",
      style: {
        backgroundImage: "repeating-linear-gradient(45deg, #ccc, #ccc 30px, #8221b2 30px, #8221b2 60px)",
        borderRadius: "20px",
        color: "black"
      }
    }
  }])
```

--------------------------------

### Vue 3 Gantt Chart Component Usage

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/README.md

Demonstrates how to use the g-gantt-chart and g-gantt-row components in a Vue 3 template. It shows how to configure the chart's start and end times, precision, and defines bar data for two rows with custom styling and properties.

```html
<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"
        },
        class: "foo" // you can also add CSS classes to your bars!
      }
    }
  ])
</script>
```

--------------------------------

### Build Vue Ganttastic Project

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/README.md

Builds the Vue Ganttastic project for testing purposes. This command compiles the project's source code into distributable files.

```bash
npm run build
```

--------------------------------

### Create Tarball for Vue Ganttastic

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/README.md

Creates a compressed tarball (.tgz) of the Vue Ganttastic package. This is useful for testing local builds in other projects before publishing.

```bash
npm pack
```

--------------------------------

### Configure Bar Handles and Immovability in Vue Ganttastic

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/common-use-cases.md

Shows how to enable resizing of bars in Vue Ganttastic by setting `hasHandles` to `true` within the `ganttBarConfig`. It also demonstrates how to prevent bars from being moved by setting `immobile` to `true`.

```vue
// Example of configuring handles for resizability
{
  myBeginDate: "...",
  myEndDate: "...",
  ganttBarConfig: {
    id: "unique-id",
    hasHandles: true // Enables dragging handles on the bar ends
  }
}

// Example of making a bar immovable
{
  myBeginDate: "...",
  myEndDate: "...",
  ganttBarConfig: {
    id: "unique-id",
    immobile: true // Prevents the bar from being dragged
  }
}
```

--------------------------------

### Handle Bar Interactions with Vue Ganttastic Events

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/common-use-cases.md

Details how to capture various user interactions with bars in Vue Ganttastic using event listeners on the `g-gantt-chart` component. Supported events include `mousedown`, `dblclick`, `mouseenter`, `mouseleave`, `dragstart`, `drag`, `dragend`, and `contextmenu`, providing access to bar data and event details.

```vue
<g-gantt-chart
  ...
  @mousedown-bar="onMousedownBar($event.bar, $event.e, $event.datetime)"
  @dblclick-bar="onMouseupBar($event.bar, $event.e, $event.datetime)"
  @mouseenter-bar="onMouseenterBar($event.bar, $event.e)"
  @mouseleave-bar="onMouseleaveBar($event.bar, $event.e)"
  @dragstart-bar="onDragstartBar($event.bar, $event.e)"
  @drag-bar="onDragBar($event.bar, $event.e)"
  @dragend-bar="onDragendBar($event.bar, $event.e, $event.movedBars)"
  @contextmenu-bar="onContextmenuBar($event.bar, $event.e, $event.datetime)"
>
  ...
</g-gantt-chart>

<script setup lang="ts">
// Assuming GanttBarObject and MouseEvent are defined types
const onMousedownBar = (bar, e, datetime) => {
  // Handle mousedown event on a bar
}
// ... other event handler functions
</script>
```

--------------------------------

### Vue Ganttastic Chart with Month Precision and Overlap Handling

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/examples.md

This HTML snippet demonstrates the usage of the g-gantt-chart component with month precision. It configures the chart to handle overlapping bars by pushing them and allows for custom color schemes and fonts. The chart displays multiple rows, each with its own set of bars defined in the Vue script.

```html
<g-gantt-chart chart-start="01.01.2022 12:00" chart-end="15.03.2022 03:00" precision="month" grid width="100%" bar-start="beginDate" bar-end="endDate" date-format="DD.MM.YYYY HH:mm" color-scheme="vue" font="Courier" push-on-overlap>
<g-gantt-row label="My row 1" :bars="monthBarList1" highlight-on-hover/>
<g-gantt-row label="My row 2" :bars="monthBarList2" highlight-on-hover/>
<g-gantt-row label="Look at me!" :bars="monthBarList3" highlight-on-hover/>
<g-gantt-row label="Fourth row" :bars="[]" highlight-on-hover/>
</g-gantt-chart>
```

--------------------------------

### Implement Custom Drag-and-Drop for Rows in Vue Ganttastic

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/common-use-cases.md

Demonstrates how to implement custom drag-and-drop functionality for rows in Vue Ganttastic using the `drop` event emitted by the `g-gantt-row` component. The event provides the mouse event object and the datetime at the drop position.

```vue
<g-gantt-chart
   ...
>
  <g-gantt-row
    label="This is my row"
    :bars="bars1"
    @drop="onDrop($event.e, $event.datetime)"
  />
</g-gantt-chart>

<script setup>
// Assuming MouseEvent is a defined type
const onDrop = (e, datetime) => {
  // Handle the drop event on the row
}
</script>
```

--------------------------------

### Bundle Bars for Simultaneous Dragging in Vue Ganttastic

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/common-use-cases.md

Explains how to group bars together in Vue Ganttastic so they are dragged simultaneously. This is achieved by assigning a common string identifier to the `bundle` property within the `ganttBarConfig` of each bar in the group.

```vue
{
  myBeginDate: "...",
  myEndDate: "...",
  ganttBarConfig: {
    id: "bar-1",
    bundle: "my-bundle-id" // All bars with this bundle ID move together
  }
},
{
  myBeginDate: "...",
  myEndDate: "...",
  ganttBarConfig: {
    id: "bar-2",
    bundle: "my-bundle-id" // Belongs to the same bundle
  }
}
```

--------------------------------

### Add New Bars to Vue Ganttastic Chart

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/common-use-cases.md

Demonstrates how to dynamically add new bars to a Vue Ganttastic chart by pushing bar objects into a reactive array. It requires each bar object to have a unique `id` within `ganttBarConfig` and specified start/end dates matching the chart's `bar-start` and `bar-end` props.

```vue
<template>
  <g-gantt-chart
    chart-start="2021-07-11 12:00"
    chart-end="2021-07-15 12:00"
    precision="hour"
    width="100%"
    bar-start="myBeginDate"
    bar-end="myEndDate"
  >
    <g-gantt-row
      label="My row 1"
      :bars="myBarList"
    />
  </g-gantt-chart>
</template>

<script setup>

import { ref } from "vue"

const myBarList = ref([])
const addNewBar = () => {
  const bar = {
    myBeginDate: "2021-07-11 17:00",
    myEndDate: "2021-07-12 03:00",
    ganttBarConfig : {
      id: "some-id-blabla" // make sure this is unique!
    }
  }
  myBarList.push(bar)
}
</script>
```

--------------------------------

### Vue Ganttastic Day Chart with Dark Theme and Custom Slots

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/examples.md

A day-based Gantt chart with a dark theme, custom row height, and no overlap enabled. It utilizes slots for custom rendering of row labels and bar labels, including images.

```html
<g-gantt-chart chart-start="30.10.2022 12:00" chart-end="02.11.2022 13:00" precision="day" grid width="100%" :row-height="70" bar-start="beginDate" bar-end="endDate" date-format="DD.MM.YYYY HH:mm" color-scheme="dark" no-overlap>
<g-gantt-row label="Row label" :bars="dayBarList1" highlight-on-hover>
<template #bar-label="{bar}">
<img v-if="bar.imgSrc" :src="bar.imgSrc" height="30" width="30"/>
{{bar.ganttBarConfig.label}}
</template>
</g-gantt-row>
<g-gantt-row label="My row 2" :bars="[]" highlight-on-hover>
<template #label>
<img src='https://user-images.githubusercontent.com/28678851/148047714-301f07df-4101-48b8-9e47-1f272b290e80.png' height="30" width="30" style="padding-right:10px"/>
Label with image
</template>
</g-gantt-row>
</g-gantt-chart>
```

--------------------------------

### Vue.js Component Styles for Gantt Chart Buttons

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/examples.md

This CSS code provides scoped styles for buttons used within the Vue Ganttastic component. It defines a primary button style with padding, a green background, white text, and rounded corners. It also includes a disabled state for the button, reducing its opacity to indicate it's not currently active.

```css
button {
  padding: 10px;
  background: #258A5D;
  color: white;
  border: none;
  border-radius: 5px;
}
button:disabled {
  opacity: 0.5;
}
```

--------------------------------

### GGanttChart Component API

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/GGanttChart.md

The GGanttChart is the main component of Vue Ganttastic, representing an entire chart. It accepts various props to configure its appearance and behavior, handles custom events for user interactions, and provides slots for further customization.

```APIDOC
## GGanttChart Component

### Description
The main component of Vue Ganttastic. Represents an entire chart and is meant to have at least one `g-gantt-row` child component.

### Props
#### Path Parameters
* **chart-start** (string) - Optional - Start date-time of the chart.
* **chart-end** (string) - Optional - End date-time of the chart.
* **precision** (string?) - Optional - Display precision of the time-axis. Possible values: `hour`, `day`, `date`, `week` and `month`. Default: `"hour"`.
* **bar-start** (string) - Optional - Name of the property in bar objects that represents the start date.
* **bar-end** (string) - Optional - Name of the property in bar objects that represents the end date .
* **date-format** (string | false) - Optional - Datetime string format of `chart-start`, `chart-end` and the values of the `bar-start`, `bar-end` properties in bar objects. See [Day.js format tokens](https://day.js.org/docs/en/parse/string-format). If the aforementioned properties are native JavaScript [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) objects in your use case, pass `false`. Default: `"YYYY-MM-DD HH:mm"`.
* **width** (string?) - Optional - Width of the chart (e.g. `80%` or `800px`). Default: `"100%"`.
* **hide-timeaxis** (boolean?) - Optional - Toggle visibility of the time axis. Default: `false`.
* **color-scheme** (string | ColorScheme) - Optional - Color scheme (theme) of the chart. Either use the name of one of the predefined schemes or pass a color-scheme-object of your own. See [color schemes](#color-schemes). Default: `"default"`.
* **grid** (string?) - Optional - Toggle visibility of background grid. Default: `false`.
* **current-time** (boolean?) - Optional - Toggle visibility of current time marker. Default: `false`.
* **current-time-label** (string?) - Optional - Text to be displayed next to the current time marker. Default: `''`.
* **push-on-overlap** (boolean?) - Optional - Specifies whether bars "push one another" when dragging and overlaping. Default: `false`.
* **no-overlap** (boolean?) - Optional - If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position. Default: `false`.
* **row-height** (number?) - Optional - Height of each row in pixels. Default: `40`.
* **highlighted-units** (number[]?) - Optional - The time units specified here will be visually highlighted in the chart with a mild opaque color. Default: `[]`.
* **font** (string) - Optional - Font family of the chart. Default: `"Helvetica"`.
* **label-column-title** (string?) - Optional - If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header. Default: `''`.
* **label-column-width** (string?) - Optional - Width of the column containing the row labels (if `label-column-title` specified). Default: `150px`.

### Custom Events
#### Event List
* **`click-bar`**: `{bar: GanttBarObject, e: MouseEvent, datetime?: string}`
* **`mousedown-bar`**: `{bar: GanttBarObject, e: MouseEvent, datetime?: string}`
* **`mouseup-bar`**: `{bar: GanttBarObject, e: MouseEvent, datetime?: string}`
* **`dblclick-bar`**: `{bar: GanttBarObject, e: MouseEvent, datetime?: string}`
* **`mouseenter-bar`**: `{bar: GanttBarObject, e: MouseEvent}`
* **`mouseleave-bar`**: `{bar: GanttBarObject, e: MouseEvent}`
* **`dragstart-bar`**: `{bar: GanttBarObject, e: MouseEvent}`
* **`drag-bar`**: `{bar: GanttBarObject, e: MouseEvent}`
* **`dragend-bar`**: `{bar: GanttBarObject, e: MouseEvent, movedBars?: Map<GanttBarObject, {oldStart: string, oldEnd: string}>}`
* **`contextmenu-bar`**: `{bar: GanttBarObject, e: MouseEvent, datetime?: string}`

### Slots
#### Slot List
* **`upper-timeunit`**: Slot data: `{label: string, value: string}`. Content of an upper time-unit section in the time axis.
* **`timeunit`**: Slot data: `{label: string, value: string}`. Content of a time-unit section in the time axis.
* **`bar-tooltip`**: Slot data: `{bar: GanttBarObject}`. Slot for the tooltip which appears when hovering over a bar.
* **`current-time-label`**: No slot data. Slot for the text shown next to the current time marker when the prop `current-time` is set to `true`.
* **`label-column-title`**: No slot data. Slot for the title of the extra column to the left where the row labels are shown if the prop `label-column-title` is set.
* **`label-column-row`**: Slot data: `{ label: string }`. Slot for the label of a row if `label-column-title` is set.

```

--------------------------------

### Vue Ganttastic Custom Color Scheme Structure

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/GGanttChart.md

Defines the expected structure for a custom color scheme object in Vue Ganttastic. This object should contain properties for primary, secondary, ternary, quartenary, hover highlight, marker current time, text, background, and an optional toast color.

```typescript
{
  primary: string,
  secondary: string,
  ternary: string,
  quartenary: string,
  hoverHighlight: string,
  markerCurrentTime: string,
  text: string,
  background: string,
  toast?: string
}
```

--------------------------------

### Vue.js Functions for Dynamic Bar Manipulation

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/examples.md

These JavaScript functions, written in Vue.js, demonstrate how to dynamically add and delete bars from a Gantt chart's data. `addHourBar` adds a new bar to `hourBarList2` only if a bar with a specific ID ('test1') does not already exist, preventing duplicates. `deleteHourBar` removes the bar with the ID 'test1' from `hourBarList2` if it exists. These functions are typically triggered by user interactions, such as button clicks.

```javascript
const addHourBar = () => {
  if (hourBarList2.value.some(bar => bar.ganttBarConfig.id === "test1")) {
    return
  }
  const bar = {
    beginDate: "01.01.2022 18:00",
    endDate: "02.01.2022 02:00",
    ganttBarConfig: {
      id: "test1",
      hasHandles: true,
      label: "Hello!",
      style: {
        background: "#5484b7",
        borderRadius: "20px",
        color: "white"
      }
    }
  }
  hourBarList2.value.push(bar)
}

const deleteHourBar = () => {
  const idx = hourBarList2.value.findIndex(b => b.ganttBarConfig.id === "test1")
  if (idx !== -1) {
    hourBarList2.value.splice(idx, 1)
  }
}
```

--------------------------------

### Enable Bar Pushing on Overlap in Vue Ganttastic Chart

Source: https://github.com/zunnzunn/vue-ganttastic/blob/master/docs/common-use-cases.md

Illustrates how to configure the `g-gantt-chart` component to prevent bars from overlapping when dragged. By adding the `push-on-overlap` prop, bars will push each other to maintain separation.

```vue
<g-gantt-chart
  ...
  push-on-overlap
  ...
>
  ...
</g-gantt-chart>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.