Gantt charts for React
React.js is very popular, and while it’s technically “just a library” and not a framework per se, the features it offers allow you to develop virtually any kind of Web applications with a lot of ease and flexibility.
If you develop project management or scheduler applications, however, you’d still need to design and set up a lot of code if you’d need even the lightest timeline view. That’s simply because time itself is a difficult concept to grasp and to properly represent with all its rules, exceptions, and exceptions to exceptions.
While you could use our JavaScript-based library directly (with just some integration code that you could write yourself), you’ll be happy to find out, however, that we have recently developed React wrappers over them too!
With the React components from our package you could easily write code to set up beautiful Gantt charts, schedule charts, load charts, and PERT diagrams directly in your JSX.
(Full demo here, tutorial online, sample code on GitHub too.)
import {GanttChartView} from
'./DlhSoft.ProjectData.GanttChart.React.Components'; function App() {
var items = [ … ];
var settings = { … };
function onItemChanged(item, propertyName, isDirect, isFinal) {
console.log(propertyName + ' changed for ' + item.content );
}
return (
<GanttChartView items={items} settings={settings}
change={onItemChanged}
style={{minHeight: '388px'}}>
…
</GanttChartView>
);
}
Although the built-in components and settings are often enough, you can fully customize the grids, charts, and all diagram shapes in your app using a long list of available settings, borrowed from the pure JavaScript that runs behind the scenes.
(Besides Gantt charts, we also offer schedule charts, load charts, PERT charts and network diagrams, and we have defined React wrappers for all.)
