https://github.com/frappe/gantt

Open Source Javascript Gantt
https://github.com/frappe/gantt

frappe-gantt gantt gantt-chart ganttjs javascript-gantt

Last synced: 8 days ago
JSON representation

Open Source Javascript Gantt

• Host: GitHub
• URL: https://github.com/frappe/gantt
• Owner: frappe
• License: mit
• Created: 2016-08-26T12:17:58.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-04-14T08:18:00.000Z (7 months ago)
• Last Synced: 2024-04-14T10:09:06.558Z (7 months ago)
• Topics: frappe-gantt, gantt, gantt-chart, ganttjs, javascript-gantt
• Language: JavaScript
• Homepage: https://frappe.io/gantt
• Size: 1.06 MB
• Stars: 4,303
• Watchers: 97
• Forks: 949
• Open Issues: 119
• Metadata Files:
  • Readme: README.md
  • License: license.txt

Awesome Lists containing this project

• awesome - frappe/gantt - Open Source Javascript Gantt (JavaScript)
• awesome-canvas - gantt - Open Source Javascript Gantt.   (Libraries / Gantt)
• awesome-starred-test - frappe/gantt - Open Source Javascript Gantt (JavaScript)
• awesome - frappe/gantt - Open Source Javascript Gantt (JavaScript)
• awesome-github-star - gantt

README

        


    

    
Frappe Gantt

    


        

A simple, interactive, modern gantt chart library for the web

        

            View the demo »

        

    





    

        

    



### Install

```

npm install frappe-gantt

```

### Usage

Include it in your HTML:

```

```

Or from the CDN:

```

```

And start hacking:

```js

var tasks = [

  {

    id: 'Task 1',

    name: 'Redesign website',

    start: '2016-12-28',

    end: '2016-12-31',

    progress: 20,

    dependencies: 'Task 2, Task 3',

    custom_class: 'bar-milestone' // optional

  },

  ...

]

var gantt = new Gantt("#gantt", tasks);

```

You can also pass various options to the Gantt constructor:

```js

var gantt = new Gantt('#gantt', tasks, {

    header_height: 50,

    column_width: 30,

    step: 24,

    view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],

    bar_height: 20,

    bar_corner_radius: 3,

    arrow_curve: 5,

    padding: 18,

    view_mode: 'Day',

    date_format: 'YYYY-MM-DD',

    language: 'en', // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'

    popup: null,

});

```

You can add `dark` class to the container element to apply dark theme.

```html



```


### Contributing

If you want to contribute enhancements or fixes:

1. Clone this repo.

2. `cd` into project directory

3. `yarn`

4. `yarn run dev`

5. Open `index.html` in your browser, make your code changes and test them.

### Publishing

If you have publishing rights (Frappe Team), follow these steps to publish a new version.

Assuming the last commit (or a couple of commits) were enhancements or fixes,

1. Run `yarn build`

    This will generate files in the `dist/` folder. These files need to be committed.

1. Run `yarn publish`

1. Type the new version at the prompt

    Depending on the type of change, you can either bump the patch version or the minor version.

    For e.g.,

    ```

    0.5.0 -> 0.6.0 (minor version bump)

    0.5.0 -> 0.5.1 (patch version bump)

    ```

1. Now, there will be a commit named after the version you just entered. Include the generated files in `dist/` folder as part of this commit by running the command:

    ```

    git add dist

    git commit --amend

    git push origin master

    ```

License: MIT

---

Project maintained by [frappe](https://github.com/frappe)