dhtmlxGantt is a full-featured Gantt chart for cross-browser and cross-platform applications. The most complete Gantt chart library for all project management application needs.
This article will reveal the typical use cases of DHTMLX Gantt customization, including custom tasks, the new appearance of the grid, etc., to demonstrate the power of its functions!
DHTMLX Gantt official version download
Use Case – New Project Skin, Current Month Marker and Collapsible Grid
The default view of DHTMLX Gantt displays project and task names written within bars. Project bars usually have a rectangular shape, like task bars, and differ in color from tasks. However this is not the only way to display projects and tasks in DHTMLX Gantt, our Gantt gallery is very flexible in terms of customization and allows for a variety of ways to visualize data.
Here you can see that the project is well described with colorful and thin lines and labels at the top, with the project date and duration stamped next to the project name. Therefore, end users can quickly grasp how much time each project will take.
Task labels are also located on the right side of the taskbar, and the current month is clearly highlighted on the time scale so it doesn’t get lost on the timeline. Additionally, there is a toggle button for collapsing sections of the grid to make more space for the Gantt chart.
Such customization contributes to workflow transparency and is especially useful for small to medium-sized projects. It also makes your Gantt charts more user-friendly and easier to manage, switching between views with expanded grid sections and full-screen charts.
Customization Guide
Let’s take a closer look at the Gantt chart produced by DHTMLX.
Current month mark
We start with the time scales and vertical markers used in the Gantt chart timeline. The configuration of scales is specified through the scales attribute:
gantt.config.scales = [
{
unit: "quarter", step: 1, format: function (date) {
const quarter = (date.getMonth() % 3) + 1;
const year = date.getFullYear();
return `<b>Q${quarter}</b> ${year}`;
}
},
{
unit: "month", step: 1, format: function (date) {
const monthName = gantt.date.date_to_str("%F")(date)
const nextDate = gantt.date.add(date, 1, "month");
if ( + date <= + today & amp; & amp; + today <= + nextDate) {
return `<div class="current_month">${monthName}</div>`;
}
else {
return monthName;
}
}
},
]
In the scales configuration array, we specify two built-in scale types, “quarter” and “month”. In these two scale types of cells, any value or HTML element can be displayed, but they will not change the width of the cell. For example, a cell in the lower scale contains a custom element with a specific class that colors the cell with CSS styles. This element highlights the current month, specified in the today parameter:
const today = new Date(2023, 05, 18)
const todayMarker = gantt.addMarker({
start_date: today,
css: "today",
});
The today parameter is also used in the addMarker() method to add a vertical mark that highlights the current month. In the marker configuration, we specify the Date object used to set the marker’s date and the CSS class used to add the marker’s color. Since no text parameter is applied in the addMarker() method, the marker will appear as a simple line.
Task Behavior
It’s worth saying a few words about interacting with tasks on the Gantt chart timeline, the end user can move a given task to any specific point along the timeline, it doesn’t snap to the start or end of any cell. To achieve this, we change the value of the round_dnd_dates parameter to false in the Gantt chart. Configuration object:
gantt.config.round_dnd_dates = false;
Based on the needs of this demo project, we also added the ability to move project tasks and disabled the display of dependencies (links) between tasks and task progress:
gantt.config.drag_project = true; gantt.config.drag_progress = false; gantt.config.drag_links = false;
Grid
In the grid portion of the Gantt chart, there are two columns. The first column contains the name of the task and the second column provides the time frame of the task. Using template functions you can add any text or HTML element in the cells of a grid column:
gantt.config.columns = [
{ name: "text", label: " ", width: 300, tree: true },
{
name: "dates", label: getToggleButton(), align: "center", template: function (task) {
if (task.type == "project") {
return ""
}
return taskDatesFormat(task)
}
},
];
Now we want to focus on the taskDatesFormat function, which returns the required string from the task object:
function taskDatesFormat(task) {
let startMonth = gantt.date.date_to_str("%M");
let endMonth = startMonth;
let day = gantt.date.date_to_str("%j");
if (task.start_date.getMonth() == task.end_date.getMonth()) {
endMonth = gantt.date.date_to_str("");
}
const start_date = `${startMonth(task.start_date)} ${day(task.start_date)} - `;
const end_date = `${endMonth(task.end_date)} ${day(task.end_date)}`;
return start_date + end_date;
}
This function works as follows:
- It converts the task start date to a string so that only the name of the month is displayed.
- If a task starts and ends in the same month, then the name of the month will only appear before the start date. If the start and end dates belong to different months, the start month appears before the start date and the end month appears before the end date.
- The date follows the name of the month.
There is a special toggle button that allows folding and expanding grid sections. To add this button, we specify the getToggleButton() function in the label parameter. This function returns different values depending on the current state of the grid. When the button is clicked, we change the return value and width in the grid_width configuration:
function toggleGrid() {
if (gridToggleText == "lt") {
gantt.config.grid_width = 80;
gridToggleText = "gt"
}
else {
gantt.config.grid_width = initialGridWidth;
gridToggleText = "lt"
}
gantt.config.columns[1].label = getToggleButton();
gantt.render();
}
Alternatively, you can use the resizer to change the grid size. The min_grid_column_width parameter sets the minimum width of each column, so the grid cannot be made smaller than the specified size. Because our Gantt chart has two columns and the value of the min_grid_column_width parameter is 30px, the minimum grid width is 60px.
gantt.config.min_grid_column_width = 30;
The colored circles in the grid area are specified in the grid_folder template:
gantt.templates.grid_folder = function (task) {
return `<div style="color:${task.color}" class="project_icon"> & amp;nbsp;? & amp;nbsp;</div>`;
};
The returned custom element contains a special symbol “?” and the color and size of the circle are specified by CSS styles.
For tasks with child elements, the grid_folder template displays, while for other tasks, the grid_file template returns an empty string (” “):
gantt.templates.grid_file = function (item) {
return "";
};
The task_row_class template hides a border below tasks with child elements:
gantt.templates.task_row_class = function (start, end, task) {
if (task.type == "project") {
return "project_row";
}
};
Task Appearance
Finally let’s introduce how to customize projects and tasks in the Gantt chart. Since there should be no text in the taskbar, the task_text template returns an empty string:
gantt.templates.task_text = function (start, end, task) {
return "";
};
With the help of the rightside_text template, the text label is displayed on the right side:
gantt.templates.rightside_text = function (start, end, task) {
if (task.type != "project") {
return task.text;
}
};
In our demo, the rightside_text template does not return any project tasks. Instead, we use the addTaskLayer() method, which allows any text or HTML element to be displayed in the Gantt chart timeline. For project tasks, we return the task name, duration and date in the same format used in the Gantt chart grid with the help of the custom taskDatesFormat function, the values are separated by a special dot symbol “?”, custom element The position is calculated using the getTaskPosition() method:
gantt.addTaskLayer(function (task) {
if (task.type == "project") {
const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);
const el = document.createElement('div');
const dot = `<span class="dot">?</span>`
el.innerHTML = task.text + dot + taskDatesFormat(task) + dot + task.duration + "days";
el.style.left = sizes.left + 10 + 'px';
el.style.top = sizes.top + 'px';
el.style.zIndex = 1;
el.style.marginTop = "7px";
el.style.position = "absolute";
el.style.lineHeight = "16px";
return el;
}
});
That’s it! With this step-by-step guide, you can achieve the same results and create a custom Gantt chart just like our use case.