react-gantt-timeline

react-gantt-timeline

A react timeline gantt component.

Intro

React-timeline-gantt is an awesome blazing fast timeline - gantt component 😛. These are the feature currently supported:

• Virtual rendering. Can render really fast a huge number of records.
• Infinite scrolling.
• Calendar View
• Zoom mode can be set to Day ,week or Month.
• Redux Compatible.Implement all necessary call backs to trigger actions and update store.
• Task update and resizing.
• Task dependencies.
• Support paging.

Here is a demo video that shows how to use the component. Here is a working demo .

Road Map

• Hierarchical tasks.(currently under development)
• Style customisation.(currently under development)
• Zoom to task.Plan for release 4.~

Installation

npm install react-gantt-timeline

Timeline Data

The timeline data can be set with the data property of the time line. The data needs to be an array of object. Each item of the array needs to contain the following elements.

Property	value	Descriptions
start	date	The start date of the task
end	date	The end date of the task
name	string	The name of the task to be diplayed

 let data=[ {start:new Date(), end:new Date()+1 ,name:'Demo Task'}]

Timeline Events

name	params	Descriptions
onNeedData	start:Date,end :date	Is trigger every time the timeline load a new period, provide the start and end date of the period to load, this method is useful for implementing paging or filter your data to only show tasks for the relevant period
onSelectItem	item:Object	This even is trigger when a item is selected by the time line
onUpdateItem	item:Object,props:Object	This even is trigger when a item has been updated, it receive the item to be updated and the properties and values to by apply

Other properties

Property	value	Descriptions
mode	string	set the zoom lever of the timeline.The possible values are:"month","week","day"
itemHeigth	number	The height of the row 30px by default

Some Demo Code

• Crud Demo.
• Coming up a redux demo.