https://github.com/hustcc/gantt-for-react

:herb: Frappe Gantt components for React wrapper. 一个简单的甘特图 React 组件封装。
https://github.com/hustcc/gantt-for-react

frappe-gantt gantt gantt-chart ganttjs javascript-gantt project-management react-gantt

Last synced: 2 days ago
JSON representation

:herb: Frappe Gantt components for React wrapper. 一个简单的甘特图 React 组件封装。

• Host: GitHub
• URL: https://github.com/hustcc/gantt-for-react
• Owner: hustcc
• License: mit
• Created: 2017-02-14T05:09:59.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-01-17T10:03:19.000Z (almost 4 years ago)
• Last Synced: 2024-10-17T16:04:04.669Z (17 days ago)
• Topics: frappe-gantt, gantt, gantt-chart, ganttjs, javascript-gantt, project-management, react-gantt
• Language: JavaScript
• Homepage: https://git.hust.cc/gantt-for-react
• Size: 341 KB
• Stars: 310
• Watchers: 17
• Forks: 75
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-canvas - gantt-for-react - for-react/)] - 🌿 Frappe Gantt components for React wrapper.   (Libraries / Gantt)
• awesome-react - gantt-for-react - Frappe Gantt components for React wrapper.  (UI Components / Data Visualization)

README

        
# gantt-for-react

> [Frappe Gantt](https://github.com/frappe/gantt) component for React wrapper.

[![Build Status](https://travis-ci.org/hustcc/gantt-for-react.svg?branch=master)](https://travis-ci.org/hustcc/gantt-for-react)

[![npm](https://img.shields.io/npm/v/gantt-for-react.svg)](https://www.npmjs.com/package/gantt-for-react)

[![npm](https://img.shields.io/npm/dt/gantt-for-react.svg)](https://www.npmjs.com/package/gantt-for-react)

[![npm](https://img.shields.io/npm/l/gantt-for-react.svg)](https://www.npmjs.com/package/gantt-for-react)

# 1. Install

```sh

npm install --save gantt-for-react

```

# 2. Usage

Online demo see [https://git.hust.cc/gantt-for-react/](https://git.hust.cc/gantt-for-react/).

```jsx

import React from 'react';

import ReactGantt from 'gantt-for-react';

```

Or you can see the code [here](demo/Gantt.jsx#L74).

# 3. Component props

 - **`tasks`** (required, array)

The tasks array need to be show with gantt graph. task is an object with format: **{ id, name, start, end, progress, dependencies, custom_class }**.

 - **`viewMode`** (required, string)

The view mode of gantt. Can be **Quarter Day, Half Day, Day, Week, Month**.

 - **`customPopupHtml`** (optional, func)

The popo html function, can be a function that returns html or a simple html string.

And **4 event function props**: `onClick`, `onDateChange`, `onProgressChange`, `onViewChange`. Document can see [here](https://frappe.github.io/gantt/).

# 4. Screenshot

![screenshot](demo/screenshot.png)

# 5. LICENSE

MIT @[hustcc](https://github.com/hustcc)