{"id":7215,"date":"2020-04-04T12:28:18","date_gmt":"2020-04-04T09:28:18","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7215"},"modified":"2026-09-15T14:22:33","modified_gmt":"2026-09-15T11:22:33","slug":"dhtmlx-gantt-7-0-node-js-server-module-merging-multiple-calendars-reordering-grid-columns-drag-n-drop-new-customization-options","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-gantt-7-0-node-js-server-module-merging-multiple-calendars-reordering-grid-columns-drag-n-drop-new-customization-options\/","title":{"rendered":"DHTMLX Gantt 7.0: Node.js Server Module, Setting Working Time in Minutes, New Customization Options, and Much More"},"content":{"rendered":"

Here comes a turning point in the release history of our JavaScript and HTML5 Gantt chart<\/a>. A new version 7.0 delivers not only several major updates to our client-side library but also rolls out a trailblazing server-side Gantt module for Node.js. This server add-on will give you access to the logic of DHTMLX Gantt and enable you to perform scheduling analysis, receive real-time updates triggered by user actions from different sources, and synchronize Gantt schedule accordingly.<\/p>\n

New features of our client-side library v7.0 include the ability to assign resources with different working calendars to the same task using a merged calendar, set working time in minutes, reorder Grid columns by drag-n-drop, customize the Quick Info popup, fine-tune Grid columns by making their width flexible, and manipulate the Content Security Policy (CSP) compatibility via the API. Besides, there are changes in the package structure and the way localization and extensions work in DHTMLX Gantt. Dive deeper into the release details in our article.<\/p>\n

\"DHTMLX<\/a>Download a brand new trial version 7.0 right now ><\/a><\/strong><\/p>\n

Using DHTMLX Gantt with Node.js on the Server [New Add-on]<\/h5>\n

The most groundbreaking novelty of v7.0 is the introduction of the server-side version of DHTMLX Gantt library. Now there is a Node.js build of DHTMLX Gantt intended for running on the server. <\/p>\n

It gives developers an opportunity to use complex logic of DHTMLX Gantt – such as auto-scheduling, critical path, and working time calculations – on the server-side. This is essential for synchronizing actions of multiple users from different sources (e.g. desktop and mobile apps or different components of the same app) as well as conducting scheduling analysis on the server-side and updating Gantt on the client-side in real-time.<\/p>\n

As DHTMLX Gantt for Node.js is provided as a separate package, you can acquire it as an add-on to the client-side version of Gantt under any commercial license (Commercial<\/a>, Enterprise<\/a>, or Ultimate<\/a>).<\/p>\n

Read more about the versioning and installation of Node.js Gantt chart in the documentation ><\/a><\/p>\n

Specifying Working Time in Minutes<\/h5>\n

Starting with v7.0, it’s possible to set the working time<\/a> not only in hours but also in minutes via the setWorkTime<\/strong> property. Thus, a working day can start at 08:15 am and finish at 12:45 pm.<\/p>\n

To do so, you need to specify the duration_unit<\/strong> configuration option as “minute”:<\/p>\n

gantt.config<\/span>.duration_unit<\/span> =<\/span> "minute"<\/span>;<\/span>
\n
\n\/\/ sets the working time up to minutes<\/span>
\ngantt.setWorkTime<\/span>(<\/span>{<\/span>hours:<\/span>[<\/span>"8:15-12:45"<\/span>]<\/span>}<\/span>)<\/span><\/div><\/div>\n
Merging Multiple Working Calendars [PRO]<\/h5>\n

Flexible working hours and floating or shift schedules of employees make it hard to estimate the workload and timeline of a project. To overcome these difficulties, we introduced a new ability to merge different working calendars<\/a> into one in v7.0. <\/p>\n

The resulting work schedule will be based on the overlapping working hours of employees involved in a project. For instance, if working hours of one employee are from 8 am to 4 pm while another employee works from 11 am to 7 pm, the merged calendar will have a work schedule from 11 am to 4 pm. Thus, when you assign several employees to one task, the duration of this task will be calculated on the basis of their common working time. <\/p>\n

Merging different calendars into one can be done automatically by setting the gantt.config.dynamic_resource_calendars<\/strong> configuration option to true<\/em>. <\/p>\n

Let’s take two different working calendars of John and Anna as an example. John works on Mondays, Wednesdays, and Fridays, while Anna works on Mondays, Tuesdays, Fridays, and Saturdays. If we enable the dynamic_resource_calendars<\/strong> config, John’s and Anna’s working calendars will merge automatically when they are assigned to the same task. In fact, it means that they will be able to perform a common task on Mondays and Fridays only:<\/p>\n

\/\/ automatically merge working calendars when multiple resources assigned to a task<\/span>
\n        gantt.config<\/span>.dynamic_resource_calendars<\/span> =<\/span> true<\/span>;<\/span>
\n        gantt.config<\/span>.resource_property<\/span> =<\/span> "users"<\/span>;<\/span>
\n        gantt.config<\/span>.resource_calendars<\/span> =<\/span> {<\/span>
\n            1<\/span>:<\/span> gantt.addCalendar<\/span>(<\/span>{<\/span>
\n                worktime:<\/span> {<\/span>
\n                    days:<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>]<\/span>
\n                }<\/span>
\n            }<\/span>)<\/span>,<\/span>
\n            2<\/span>:<\/span> gantt.addCalendar<\/span>(<\/span>{<\/span>
\n                worktime:<\/span> {<\/span>
\n                    days:<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>,<\/span> 1<\/span>]<\/span>
\n                }<\/span>
\n            }<\/span>)<\/span>
\n        }<\/span>;<\/span><\/div><\/div>\n

If you need to merge working calendars of particular resources only, you can do it manually with the help of the mergeCalendars<\/strong> method.<\/p>\n

In the example below, we use the mergeCalendars<\/strong> method to merge John’s and Anna’s working calendars:<\/p>\n

const<\/span> johnCalendarId =<\/span> gantt.addCalendar<\/span>(<\/span>{<\/span>
\n    worktime:<\/span> {<\/span>
\n        hours:<\/span> [<\/span>"0:00-24:00"<\/span>]<\/span>,<\/span>
\n        days:<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>]<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span>
\nconst<\/span> annaCalendarId =<\/span> gantt.addCalendar<\/span>(<\/span>{<\/span>
\n    worktime:<\/span> {<\/span>
\n        hours:<\/span> [<\/span>"8:00-12:00"<\/span>,<\/span> "13:00-17:00"<\/span>]<\/span>,<\/span>
\n        days:<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>,<\/span> 1<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>,<\/span> 1<\/span>]<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\nconst<\/span> joinedCalendar =<\/span> gantt.mergeCalendars<\/span>(<\/span>
\n    gantt.getCalendar<\/span>(<\/span>johnCalendarId)<\/span>,<\/span>
\n    gantt.getCalendar<\/span>(<\/span>annaCalendarId)<\/span>
\n)<\/span>;<\/span><\/div><\/div>\n

Apart from this essential configuration update, we also added the getResourceCalendar<\/strong> method, which returns the calendar of the assigned resource, and updated the resource_calendar<\/strong> config. Besides, from now on, Gantt will recalculate the project schedule automatically when a task calendar changes. <\/p>\n

Customizing a Quick Info Popup<\/h5>\n

V7.0 brought out new customization options of DHTMLX Gantt. We expanded the functionality of the Quick Info extension by introducing the gantt.ext.quickInfo<\/strong> configuration object with a range of methods to manipulate the look and feel of the Quick Info popup:<\/p>\n

As shown in the picture below, it takes 5 working days to complete Task 1 for John and Anna, but taking into account that they are both available only on Mondays and Fridays according to their merged working calendar, Task 1 has an overall duration of 15 days:
\n\"MergingCheck the sample ><\/a><\/p>\n

In the following example, we changed the start of the working day, on which Task 1.1 is assigned, from 08:15 to 08:45 am:
\n\"SettingCheck the sample ><\/a><\/p>\n