nice-react-gantt

React-gantt-antd

A beautiful react gantt component with antd style.
This is a fork of JSainsburyPLC/react-timelines

Install

yarn add react-gantt-antd

Example

import React from 'react'
import Gantt from 'react-gantt-antd'
import 'react-gantt-antd/lib/css/style.css'

export default function App() {
  const tasks_a = [
    {
      id: "title1",
      title: "任务名称",
      start: new Date('2020-06-01'),
      end: new Date('2020-08-02'),
    }
  ]

  const tasks_b = [
    {
      id: "title1",
      title: "任务名称",
      start: new Date('2020-07-01'),
      end: new Date('2020-09-02'),
    }
  ]

  const sub_projects = [
    {
      id: "sub_project1",
      title: "子项目",
      tasks: tasks_b,
    }
  ]

  const projects = [
    {
      id: "project1",
      title: "项目1",
      tasks: tasks_a,
      projects: sub_projects,
      isOpen: false,
    }
  ]
  return (
    <Gantt
      start={new Date('2020-06-01')}
      end={new Date('2020-10-01')}
      now={new Date('2020-7-01')}
      zoom={1}
      projects={projects}
      enableSticky
      scrollToNow
    />
  )
}

export default App

API

Gantt

Property	value	default	Descriptions
start	Date		The start date of the timeline
end	Date		The start date of the timeline
now	Date	new Date()	'now' marker position
zoom	Number	1	The scale of the timeline width
projects	List	[]	The project list
minWidth	Number	120	The min width of the timeline when resizing the window
sideWidth	Number	400	The width of the sidebar
clickTask	function		when click task element
enableSticky	Bool	true	Determine whether the header is sticky or not
scrollToNow	Bool	true	Determine whether to scroll to the now marker at first or not

Project

Property	value	default	Descriptions
id	String/Number		The id of the Project
title	String/Element		The title of the Project
tasks	List		All the tasks of the Project
projects	List		All the sub projects of the Project
isOpen	Bool	false	Determine whether the project is folded not

Task

Property	value	default	Descriptions
id	String/Number		The id of the Task
title	String/Element		The title of the Task
start	Date		The start date of the Task
end	Date		The start date of the Task

Development

yarn install
yarn watch
yarn build

npm config set registry=http://registry.npmjs.org
npm config set registry=https://registry.npm.taobao.org/