react-gantt-antd-hzm

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

Usage no npm install needed!

<script type="module">
  import reactGanttAntdHzm from 'https://cdn.skypack.dev/react-gantt-antd-hzm';
</script>

README

React-gantt-antd-hzm

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

snapshot

Install

yarn add react-gantt-antd-hzm

Example

import React from 'react'
import Gantt from 'react-gantt-antd-hzm'
import 'react-gantt-antd-hzm/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/