DOCSEARCHbyAlgolia
Submit Docs

DHTMLX Gantt

repository·master·Indexed 23 days ago

https://github.com/dhtmlx/gantt

A high-performance open source JavaScript library for visualizing and managing project schedules. It features a configurable task grid, zoomable timeline, and support for milestones and summary tasks. The library includes a dataProcessor for REST API synchronization, a flexible layout system, and a plugin architecture for features like tooltips, fullscreen, and keyboard navigation. Version 10.0.0 supports integration via npm, module bundlers, or plain script tags.

Tokens
14.2K
Snippets
21
Records
102
Agent score
83%

What's inside dhtmlx-gantt

  1. Sync Gantt data with a REST API using dataProcessor

    master

    The dataProcessor component enables two-way data synchronization between the Gantt chart and a backend REST API. This allows changes made in the UI (like moving tasks or adding new ones) to be automatically sent to your server, and vice versa.

    Supported backend integration guides include:

    • Node.js / Express
    • ASP.NET Core
    • PHP / Laravel
    • Ruby on Rails
    • Python / Django

  3. Security: XSS protection in Gantt wrappers

    master

    As of version 10.0.0, the React, Vue, and Angular Gantt wrappers automatically HTML-escape string values returned from template functions to prevent XSS attacks. This protection applies to:

    • Templates
    • config.columns[].template
    • config.scales[].format functions

  4. Configure DataProcessor routing options

    master
    Version 6.1.0 introduced routing options for the DataProcessor. This allows for more granular control over how data operations (like load, update, add, delete) are routed to the server.

  6. Enable and configure extensions and locales

    master
    From version 7.0.0 onwards, Extensions and Locales are bundled within the dhtmlxgantt.js core file. They are enabled via the configuration object rather than requiring separate file imports.

  7. Use the new Resource Management features in v8.0.0

    master
    Starting from version 8.0.0, Resource Management has been updated to allow Resources and resource assignments to be loaded together with the initial data. Changes to resources and assignments are now automatically captured by the DataProcessor. This update also reduces the amount of boilerplate code required to implement the Resource panel.

  8. Configure work time in minutes and merge calendars

    master
    Starting from version 7.0.0, DHTMLX Gantt supports specifying work time in minutes and the ability to merge several work time calendars. This allows for more granular scheduling and complex working hour configurations.

  9. Use dhtmlx-gantt with plain <script> tags

    master

    If you are not using a module bundler, you can include the bundled files directly in your HTML. The side-effect import registers a global gantt object.

    <script src="codebase/dhtmlxgantt.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxgantt.css">

  12. Build dhtmlx-gantt from source

    master

    Since the Community Edition ships with TypeScript/JavaScript sources and LESS styles, you can build it yourself.

    Prerequisites:

    • Clone the repository
    • Run npm install

    Commands:

    • npm run build: Builds codebase/dhtmlxgantt.js (including ES module, CSS, and d.ts).
    • npm run start: Starts a development server with a watch mode and sample server at http://localhost:5173.
    • npm run test: Runs a smoke test by loading all samples and checking for console errors.
    • npm run lint: Runs ESLint over the src/ directory.
    git clone https://github.com/DHTMLX/gantt.git
cd gantt
npm install

npm run build