Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-gantt-timeline with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("css-layout/package.json"); // css-layout is a peer dependency. require("react-sizeme/package.json"); // react-sizeme is a peer dependency. require("moment/package.json"); // moment is a peer dependency. var reactGanttTimeline = require("react-gantt-timeline")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-gantt-timeline v0.3.8

react-gantt-timeline

npm MIT License Travis codecov Codacy Badge

A react timeline gantt component.

screencast

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 records.
  • Infinite calendar scrolling
  • Three Zoom levels : day, week, month
  • Fully customisable.
  • 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

PropertyvalueDescriptions
idString/NumberAn unique identifier for the class
startDateThe start date of the task
endDateThe end date of the task
nameStringThe name of the task to be diplayed
color (optional)StringThe 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:

PropertyvalueDescriptions
idString/NumberAn unique identifier for the class
startString/NumberThe id of the start task
endString/NumberThe 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:

Edit 1y2on87jj

Handling Inserts,Updates and Deletes

The React-timeline-gantt was build to be use under a Flux architecture, this means that the component should not be managing the state of the application, is up the store and only the store to modify the state of the application. What our component does is to give you callbacks to know when the component is asking for a change.

The TimeLine component is responsible for two things:

  • Updating task:Changing name ,start and end date
  • Creating Links

Adding,Deleting Task or links can be manage with logic outside the component. For this reason the react-timeline-gantt component provides the following callbacks:

nameparamsDescriptions
onCreateLinklink:ObjectThis callback is trigger when the component is notifying the creating of a link between two tasks
onUpdateTasktask:Object,props:ObjectThis callback is trigger when the component is notifying the updating of a Task, Sen the task we want to changes, and the properties we want to change
onSelectItemitem:ObjectThis callback is trigger when an item is selected this can be a task or a link

Here is a simple demo of how to handle updates task and link creation:

Edit 3rl69y5ylq

  • When you drag a task or resize an update will be triggered.
  • You can create a task by clicking in the black dot at the end of a task and drag and drop it to the beginning of another task.A demo of how it works can be seen here

Here is a full crud example: This demo illustrate how to do a simple application
Edit 3x8nl16p65

Customisation

To customise the look and feel the react-timeline-gantt component provides a configuration object that can be pass as a property. Here is the structure of the config object :

{
    header:{ //Targert the time header containing the information month/day of the week, day and time.
        month:{//Tartget the month elements
            dateFormat:'MMM YYYY',//The format used to diplay the month information
            style:{backgroundColor:"#333333"} //The style applied to the month elements
        },
        dayOfWeek:{//Tartget elements displaying the day of week info
            style:{backgroundColor:"chocolate"}, //The style applied to the day of week elements
            selectedStyle:{backgroundColor:"#b13525"}//The style applied to the day of week elements when is selected
        },
        dayTime:{
            style:{background:"grey",fontSize:9},
            selectedStyle:{backgroundColor:"#b13525",fontWeight:  'bold'}
        }
    },
    taskList:{
        title:{
            label:"Projects",
            style:{backgroundColor:  '#333333',borderBottom:  'solid 1px silver',
                   color:  'white',textAlign:  'center'}
        },
        task:{
            style:{backgroundColor:  '#fbf9f9'}
        },
        verticalSeparator:{
            style:{backgroundColor:  '#333333',},
            grip:{
                style:{backgroundColor:  '#cfcfcd'}
            }
        }
    },
    dataViewPort:{
        rows:{
            style:{backgroundColor:"#fbf9f9",borderBottom:'solid 0.5px #cfcfcd'}
            },
        task:{
            showLabel:false,
            style:{position:  'absolute',borderRadius:14,color:  'white',
                   textAlign:'center',backgroundColor:'grey'}
        }
    },
    links:{
        color:'black',
        selectedColor:'#ff00fa'
    }
}

This diagram shows the different elements of timeline component and where are they place:

configMap

Other properties

PropertyvalueDescriptions
modestringset the zoom lever of the timeline.The possible values are:"month","week","day"
itemHeigthnumberThe height of the row 30px by default

Some Demo Code

  • Edit n09l7m400j Crud Demo.
  • Coming up a redux demo.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free