ke-gantt v1.0.1

代码示例

import React from 'react';

import Gantt from 'ke-gantt';
import 'ke-gantt/dist/ke-gantt.css';

const data = [
  {
    id: 1,
    title: 'a',
    date_distribution: [
      {
        start_date: '2020-9-1',
        end_date: '2020-9-3',
        id: 1,
      },
    ],
  },
  {
    id: 2,
    title: 'b',
    date_distribution: [],
  },
];

export default class Example extends React.Component {
  state = {
    data: [
      {
        id: 1,
        title: 'a',
        date_distribution: [
          {
            title: 'hahahah',
            start_date: '2020-9-1',
            end_date: '2020-9-3',
            id: 1,
          },
        ],
      },
      {
        id: 2,
        title: 'b',
        date_distribution: [],
      },
    ],
  };

  columns = [
    {
      title: '名称',
      dataIndex: 'title',
      fixed: 'left',
    },
  ];

  range = {
    dataIndex: ['start_date', 'end_date'],
    allowCreate: true,
    allowUpdate: true,
    getTooltipProps: (record, item) => {
      const { title } = item;
      return {
        title,
      };
    },
    render: (record, item = {}) => {
      const { title } = item;
      return <div style={{ height: '100%', background: '#52c41a' }}>{title}</div>;
    },
    onChange: (value, record, item) => {
      console.log('change', value, record, item);
    },
  };

  render() {
    const { data } = this.state;

    return (
      <Gantt
        rowKey="id"
        columns={this.columns}
        dataSource={data}
        pagination={false}
        gantt={{
          draggable: true,
          dayWidth: 60,
          dateRange: ['2020-8-10', '2020-9-10'],
          dataIndex: 'date_distribution',
          itemKey: 'id',
          range: this.range,
        }}
      />
    );
  }
}