基于React的甘特图组件

⚠️ ⚠️ ⚠️ 该组件目前还在开发中，请谨慎使用 ⚠️ ⚠️ ⚠️

使用

安装

使用yarn

yarn add react-gantt-component

使用npm

npm install react-gantt-component --save

基本使用

import React from 'react';
import ReactDOM from 'react-dom';
import Gantt from 'react-gantt-component';

ReactDOM.render(<div style={{ width: '100%', height: 500 }}>
    <Gantt
      data={[{
        name: '一个名称',
        startDate: '2020-10-01',
        endDate: '2020-10-08',
        collapsed: false,
        children: [{
          startDate: '2020-10-01',
          endDate: '2020-10-08',
          name: '一个名称',
          collapsed: false
        }]
      }]}
      columns={[{
        name: 'name',
        label: '名称',
      }]}
      onUpdate={async () => {
        return true
      }}
    />
  </div>,document.getElementById("root"))

配置项

`data`

甘特图的数据

`startDateKey`

默认: startDate

开始时间对应的key

`endDateKey`

默认: endDate

结束时间对应的key

`columns`

table的列配置

`onUpdate`

时间更新的回调，返回true代表修改成功

`isRestDay`

默认: 周六和周日节假日

甘特图的节假日判断，返回true代表节假日

`getBarColor`

任务条的颜色配置

`showBackToday`

默认: true

是否展示回到今天的按钮

`showUnitSwitch`

默认: true

是否展示单位切换按钮

`unit`

默认: day

单位，可选的值有day,week,month,quarter,halfYear

`onRow`

table的行事件配置，目前支持onClick

`tableIndent`

默认: 30

table每一级的缩进

`expandIcon`

table展开图标

`renderBar`

任务条自定义渲染

`renderBarThumb`

创建时的任务条自定义渲染

`onBarClick`

任务条点击回调

`tableCollapseAble`

默认: true

是否可以收起table

License

moriahq/react-gantt-component

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages