https://github.com/khattakdev/bryntum-gantt-vue-2
https://github.com/khattakdev/bryntum-gantt-vue-2
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/khattakdev/bryntum-gantt-vue-2
- Owner: khattakdev
- Created: 2024-12-17T08:21:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-17T08:27:24.000Z (over 1 year ago)
- Last Synced: 2025-04-06T01:17:04.756Z (about 1 year ago)
- Language: Vue
- Size: 115 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Project setup
```
npm install
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# Bryntum Gantt Setup
## Installation
Install the bryntum packages (Licensed)
```shell
npm install @bryntum/gantt @bryntum/gantt-vue
```
Trial:
```shell
npm install @bryntum/gantt@npm:@bryntum/gantt-trial @bryntum/gantt-vue-2
```
## Setting up structure
Import and use the `BryntumGantt` in the `App.vue` file:
```js
import { BryntumGantt } from "@bryntum/gantt-vue";
export default {
name: "App",
components: {
BryntumGantt,
},
};
```
## Configuration
Create a `src/AppConfig.js` file:
```js
import { StringHelper } from "@bryntum/gantt";
export const ganttConfig = {
dependencyIdField: "sequenceNumber",
rowHeight: 45,
tickSize: 45,
barMargin: 8,
project: {
autoSetConstraints: true, // automatically introduce `startnoearlier` constraint if tasks do not use constraints, dependencies, or manuallyScheduled
autoLoad: true,
loadUrl: "data/data.json",
},
columns: [{ type: "name", width: 250 }],
// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
if (taskRecord.isLeaf && !taskRecord.isMilestone) {
return StringHelper.encodeHtml(taskRecord.name);
}
},
};
```
## JSON data
Create a `public/data/data.json` file and populate it with the following:
Expand data
```json
data
```
Import it in `App.vue`:
```js
// 3. use it
import { BryntumGantt } from "@bryntum/gantt-vue";
import { ganttConfig } from "./AppConfig"; // 1. import here
export default {
name: "App",
components: {
BryntumGantt,
},
data() {
return { ganttConfig }; // 2. make sure to return it
},
};
```
## Styling
Create a `src/assets/App.css`:
```css
@import "@bryntum/gantt/gantt.stockholm.css";
body,
html {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
font-family: sans-serif;
font-size: 14px;
}
#app {
flex: 1 1 100%;
}
```
Import it in `App.vue`:
```css
@import "./assets/App.css";
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```