react-gantt-antd-tokrak

1.0.13 • Public • Published

React-gantt-antd-tokrak

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

snapshot

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/

Readme

Keywords

none

Package Sidebar

Install

npm i react-gantt-antd-tokrak

Weekly Downloads

4

Version

1.0.13

License

MIT

Unpacked Size

50.9 kB

Total Files

37

Last publish

Collaborators

  • woodrow_wang