{"id":11782,"date":"2023-09-28T12:00:25","date_gmt":"2023-09-28T09:00:25","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=11782"},"modified":"2026-09-15T14:21:29","modified_gmt":"2026-09-15T11:21:29","slug":"deep-dhtmlx-gantt-customization-tasks-month-marker-grid","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/deep-dhtmlx-gantt-customization-tasks-month-marker-grid\/","title":{"rendered":"Deep DHTMLX Gantt Customization: New Looks of Tasks, Month Marker, and Customized Grid"},"content":{"rendered":"

There are as many requirements as many projects. We often receive requests from developers about how far they can go in customizing DHTMLX Gantt. Not everyone knows that our JS Gantt chart<\/a> allows changing virtually every aspect of its appearance. The resulting Gantt built with DHTMLX can look very different from the original one. <\/p>\n

We start a new series of articles on the blog, where we will uncover the most exemplary cases of customizing DHTMLX Gantt to demonstrate its versatility.<\/p>\n

Use Case: New Project Appearance, Current Month Marker, and Collapsible Grid<\/h5>\n

The default view of DHTMLX Gantt displays project and task names written inside bars. The project bar usually has a rectangle shape, just like the task bar, and differs from tasks in color. However, this is not the only way to show projects and tasks in DHTMLX Gantt. Our Gantt chart library is very flexible in terms of customization and allows visualizing data in almost any imaginable way. Don’t take our word for it, but look at a live example.<\/p>\n

\"DHTMLXCheck the code snippet ><\/a><\/p>\n

Here, you can see projects nicely depicted with thin, colorful lines and labels on top, project dates and duration marked next to their names. Thus, end-users can quickly grasp how much time each project will take. <\/p>\n

Task labels are also located to the right of the task bar. The current month is clearly highlighted in the timescale not to get lost on the timeline. Besides, there is a toggle button for collapsing the grid section to make more room for the Gantt chart.<\/p>\n

Such a customization contributes to the transparency of the workflow and can be especially useful for small and medium-sized projects. It also makes your Gantt more user-friendly and easier to manage, switching between the view with an expanded grid section and a full-screen chart.<\/p>\n

Customization Guide<\/h5>\n

Let’s delve into what is under the hood of such a Gantt chart made by DHTMLX.<\/p>\n

Current Month Marker<\/h6>\n

We start with the time scales and the vertical marker used in the Gantt timeline. The configuration of scales is specified via the scales<\/strong> property:<\/p>\n

gantt.config.scales = [
\n    {
\n        unit: "quarter", step: 1, format: function (date) {
\n            const quarter = (date.getMonth() % 3) + 1;
\n            const year = date.getFullYear();
\n            return `<b>Q${quarter}<\/b> ${year}`;
\n        }
\n    },
\n    {
\n        unit: "month", step: 1, format: function (date) {
\n            const monthName = gantt.date.date_to_str("%F")(date)
\n            const nextDate = gantt.date.add(date, 1, "month");
\n            if (+date <= +today && +today <= +nextDate) {
\n                return `<div class="current_month">${monthName}<\/div>`;
\n            }
\n            else {
\n                return monthName;
\n            }
\n        }
\n    },
\n]<\/div><\/div>\n

In the array of the scales<\/strong> config, we specify two built-in types of scales, “quarter” and “month”. In the cells of both scale types, we can display any values or HTML elements, but they won’t change the width of cells. For instance, one of the cells in the lower scale with names of months includes a custom element with a specific class for coloring this cell with CSS styles. This element highlights the current month, which is specified in the today<\/strong> parameter:<\/p>\n

const today = new Date(2023, 05, 18)
\nconst todayMarker = gantt.addMarker({
\n    start_date: today,
\n    css: "today",
\n});<\/div><\/div>\n

The today<\/strong> parameter is also used in the addMarker()<\/strong> method for adding a vertical marker that highlights the current month. In the marker configuration, we specify the Date<\/strong> object that sets the marker’s date and the CSS class for adding the marker color. Since we do not apply the text<\/strong> parameter in the addMarker()<\/strong> method, the marker will be shown as a simple line.<\/p>\n

Task Behavior<\/h6>\n

It is necessary to say a few words about the interaction with tasks in the Gantt timeline. End-users can move a given task along the timeline to any specific point and it won’t snap to the beginning or end of any cell. To make it happen, we changed the value of the round_dnd_dates<\/strong> parameter to false<\/em> in the gantt.config<\/strong> object:<\/p>\n

gantt.config.round_dnd_dates = false;<\/div><\/div>\n

Following the requirements of this demo project, we also added the ability to move project tasks and disabled the display of dependencies (links) between tasks and the progress of tasks:<\/p>\n

gantt.config.drag_project = true;
\ngantt.config.drag_progress = false;
\ngantt.config.drag_links = false;<\/div><\/div>\n
Grid<\/h6>\n

Let’s move on to the grid section. In the grid part of the Gantt chart, there are two columns. The first column contains the names of tasks, while the second one provides their timeframes. Using the template<\/strong> function, you can add any text or HTML elements in the cells of the grid column:<\/p>\n

gantt.config.columns = [
\n    { name: "text", label: " ", width: 300, tree: true },
\n    {
\n        name: "dates", label: getToggleButton(), align: "center", template: function (task) {
\n            if (task.type == "project") {
\n                return ""
\n            }
\n
\n
\n            return taskDatesFormat(task)
\n        }
\n    },
\n];<\/div><\/div>\n

Now we want to focus on the taskDatesFormat<\/strong> function that returns the needed string from a task object:<\/p>\n

function taskDatesFormat(task) {
\n    let startMonth = gantt.date.date_to_str("%M");
\n    let endMonth = startMonth;
\n    let day = gantt.date.date_to_str("%j");
\n
\n
\n    if (task.start_date.getMonth() == task.end_date.getMonth()) {
\n        endMonth = gantt.date.date_to_str("");
\n    }
\n    const start_date = `${startMonth(task.start_date)} ${day(task.start_date)} - `;
\n    const end_date = `${endMonth(task.end_date)} ${day(task.end_date)}`;
\n    return start_date + end_date;
\n
\n}<\/div><\/div>\n

This function works as follows:<\/p>\n