JavaScript Resource Planning Component / Gantt Chart with Editing Capabilities

Question

I'm looking for a JS-based Resource Planning Component, where i have the available resources on the left and the resource load on the right.

So far i only found a few gantt chart implementation, which lack add, move and editing capabilitys. I wounder whether such a component exists.

Answer 1

I don't know of any out of the box solutions, but this is something that could probably be implemented somewhat easily. If you create several divs for rows, and then sub-divs for resources, you could build something like the spec.

1. First, keep track of all the resources, and the durations, in some kind of a datastructure.

   • I'd probably use backbone JS's models, since that's what I use for most everything.

2. Create a render function, that places an array of resources on the page, and lays them out, etc.

3. Create add/remove functions that add/remove elements, then call the render function to relayout the elements

4. To add dragging, I'd use jQuery UI Draggable, this makes it fairly easy to drag elements, and includes places for attaching callbacks when elements are dragged, dropped, etc.

   • This may take some doing, as dragging the duration of the events/resources may not be perfectly straightforward.

Answer 2

There is a quite nice library called DHTMLX Scheduler which also includes a timeline view: http://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml You can get the free GNU GPL version or a commercial one. A running example can be found here: http://booking.javaplanner.com/