]po[ Gantt Editor

This package implements a project Gantt Editor in HTML5 ("AJAX") technology as a single-page open-source application similar to

]po[ can import schedules from these tools, allowing project managers to work off-line with their preferred tools.

Gantt Editor 

The current development status is available as part of our V5.0.beta demo server . Please log in as "Ben Bigboss" or click on this URL  for a direct link to an example project. Next choose sub tab "Gantt Editor":

Menu Gantt Editor

Vision and Development Goal

The goal of this package is to provide users with an enterprise-grade Gantt editor as open-source using Web technologies. The editor should be easy to use for occasional users and provide a complete feature set for sophisticated users.

The ]po[ Gantt editor should leverage the data available from [timesheet management] and other projects in order to provide project managers with information about project progress, planned vs. real resource consumption and resource availability, bridging the space between single-project and multi-project management.


The ]po[ Gantt Editor uses the Sencha ExtJS  HTML5 JavaScript library as a base. The ]po[ Gantt Editor follows the Sencha Model-View-Controller development conventions and implements the application as a number of panels, views, controllers, stores and models.

Open Source License

The underlying Sencha ExtJS  library is available both as open-source and as a commercial version. ]po[ follows these conditions and releases all ExtJS code under a similar dual license:

  • GNU Public License V3:
    All JavaScript source code related to the Gantt Editor is licensed under this restrictive open-source license.
  • ]po[ Free License:
    An alternative license free of charge, but with limited distribution.
  • Please contact us if you are interested in other license conditions.

Detailed Feature Status 

The following list details the features of the Gantt Editor and their current implementation status.

Current status - Beta (2020-06-02)

Task Tree:

  • The "task tree" shows a collapsible list of tasks of unlimited depth.
  • You can use drag-and-drop to move tasks and indent/outdent to change the project structure 
  • Configurable columns show all important project fields. Columns can be shown or hidden, the server stores the column configuration persistently.
  • The "Work" field aggregates work from sub-tasks to super-tasks up to the main project.
  • The "% Done" field that aggregates the work done in sub-tasks to super-tasks up to the main project.
  • The "Assignments" is editable either as a text field or . A "picker" opens a resource assignment dialogue.
  • Save and reload buttons allow to permanently save changes and to discard changes, reloading the original data from the server.

Gantt Panel:

  • Time line showing years, months, weeks and days, depending on the zoom level.
  • You can zoom in and out of the time line. A vertical scroll bar allows to move the task tree. 
  • A "Maximize" button allows the Gantt editor to take up the entire browser window.
  • Gantt bars show the project start- and end date, together with a "% Done" bar in the center of the bar. Resource assignments are shown behind the Gantt bars.
  • Gantt tasks with four drag-and-drop options:
    • Horizontal move for moving the start- and end date of tasks simultaneously maintaining a constant duration.
    • Resizing for moving the end-date back and forth while maintaining the start-date, effectively changing the task duration.
    • Vertical drag-and-drop to create new dependencies between tasks.
    • Resizing the "% done" bar of the project 
  • Dependencies between task are drawn in black or red. Currently we draw dependencies in red indicating that the dependency condition is broken, instead of forcing the dependency by moving the dependent Gantt bar.
  • A "timesheet hours logged" bar inside a Gantt task, below the "% done" bar shows the actual hours consumed.
  • "Resources consumed" bar below the "Percent done" bar:
    A second bar per project shows the resource consumed (time sheet hours, travel expenses, 3rd party costs) vs. the budget of the task, allowing to compare progress with effort.
  • Resource Management: The Gantt panel shows assignments of a resource to other projects as a red shadow below the activity.


  • Forward scheduling:
    Task duration (duration = work / assigned resources) and task dependencies are enforced by the scheduling engine including generalized dependencies (end-to-start, end-to-end, start-to-end or start-to-start) with a predecessor/successor.
  • Super-tasks change their start- and end-date depending on sub-tasks.
  • Resource management conflicts and over/under allocations are shown using a red background "shadow".
  • Inter-project dependencies (dependencies between different projects) are shown in the Portfolio Planner
  • A "Online Help" menu 
  • Keyboard operation: Basic keyboard operation is available for the task tree. However, we would need to define keyboard commands for additional operations, document these options and keep them as close as possible to industry standards.

Known Issues & Planned Extensions

 Test Scenario:

Task List:

  • Undo/Redo: The architecture is prepared for undo/redo, but the undo/redo stack has not yet been implemented.
  • Over- /Under-assignment warning: The system should notify the user of the estimated work of a task does not correspond to the assigned resources.

Gantt Panel:

  • none so far


  • Precision by minute or second: Currently, scheduling precision is "by day". Future versions will include a higher precision.
  • Backward Scheduling: Currently, only scheduling constraints of type "should be later than" are enforced (forward scheduling). In the future, the ]po[ Gantt Editor should also allow to plan projects "from the end".
  • Resource Calendars: There are no resource calendars yet. All assignments are calculated on a per-day granularity. 
  • Multi-Project Scheduling: ]po[ already includes an integration with TaskJuggler . Now provide a way to include TaskJuggler results into a project. 

Online Help: 

  • Create a Wiki tutorial explaining how to use the Gantt editor
  • Create an online help with "Tips of the Day" for all important GUI elements


  • Import from MS-Project and other project management tools:
    The import is available as a link in the side-bar. Add a button in the Gantt editor directly?
  • Keyboard operation: Define additional keyboard commands for additional operations, document these options and keep them as close as possible to industry standards.

Please contact us if you want to participate in either support us extending this module or getting invited for beta testing it. 


Package Documentation

Procedure Files

tcl/intranet-gantt-editor-procs.tcl       Gantt Editor library. 


gantt_editor_portlet       Returns a HTML code with a Gantt editor for the project. 

SQL Files


Content Pages





  Contact Us
  Project Open Business Solutions S.L.

Calle Aprestadora 19, 12o-2a

08902 Hospitalet de Llobregat (Barcelona)


 Tel Europe: +34 609 953 751
 Tel US: +1 415 200 2465
 Mail: info@project-open.com