react-gantt-timeline

react-gantt-timeline

A react timeline gantt component.

About

React-timeline-gantt is a component built to display and manage calendar gantt charts. It use virtual rendering to be reactive an efficient.

The component is capable of:

• Can handle 100 thousands
• Infinite calendar scrolling
• Three Zoom levels : day, week, month
• Fully customizable.
• Support all CRUD operations.
• Task and Link creation.
• Support Paging.
• Can be easily integrated with Redux

To watch a demo take a look at video that shows how to use the component.

To play with a live demo .

Installation

npm install react-gantt-timeline

The component has the following dependencies: moment, react-sizeme

Getting started

The first thing to once the component has been install and all it dependencies is create the data that the timeline component consume.The time line has two data providers data and links.

Data :is an array of objects that contains the task to be shown. Each one of the object that are part of the array need to have the following compulsory fields

Property	value	Descriptions
id	String/Number	An unique identifier for the class
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
color (optional)	String	The color of the task to be diplayed

An example of data definition:

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

Links :is also an array of objects that contains links between task. Each one of the object that are part of the array need to have the following compulsory fields:

Property	value	Descriptions
id	String/Number	An unique identifier for the class
start	String/Number	The id of the start task
end	String/Number	The id of the end task

An example of data definition:

 let links=[ {id:1,start:1, end:2},
			{id:2,start:1, end:3}]

Once the data is define we just need to declare the component and populate it with both data providers.

<TimeLine  data={data} links={links}/>);

Here is the demo code:

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.