React-gantt-antd-tokrak

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

Install

yarn add react-gantt-antd-tokrak

Example

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

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

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

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

  const projects = [
    {
      id: "project1",
      index: 0,
      title: "项目1",
      tasks: tasks_a,
      projects: sub_projects,
      isOpen: false,
    }
  ]

  const clickTask = e => {
    console.log(e);
  };

  const clickProject = e => {
    console.log(e);
  };

  return (
    <Gantt
      start={new Date('2020-06-01')}
      end={new Date('2020-10-01')}
      now={new Date('2020-7-01')}
      zoom={1}
      sidebarWidth={240}
      minWidth={800}
      projects={projects}
      enableSticky={true}
      scrollToNow={true}
      clickTask={clickTask}
      clickProject={clickProject}
    />
  )
}

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	800	The min width of the timeline when resizing the window
sidebarWidth	Number	240	The width of the sidebar
clickProject	function		when click project element
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
maintPrjId	String/Number		The id of the Project
index	Number		The index of the Project
maintPrjName	String/Element		The title of the Project
maintTasks	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
maintTaskId	String/Number		The id of the Task
index	Number		The index of the Task
taskName	String/Element		The title of the Task
beginTime	Date		The start date of the Task
endTime	Date		The start date of the Task
tooltip	String		The tooltip 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/