Displaying the End Date

With our system, when we mark end date, we really mean that it is the last day. For example, a one day duration task means that the start date is the same as the end date. I’ve found that this library doesn’t display a bar on the end date. My work around for now was to just add 1 day, and display a string with our official end date. However, now I am moving into being able to interact with the data instead of a read-only situation, and it obviously can’t update the grid dynamically when moving items or changing the end date.

What can I do to change the way this is rendered? I have no problem diving into the source code, as I am a developer. Can you give me some way to customize this, so I can have the correct end date and still display a bar on that date?


I’ve managed to make almost everything work by just adding an extra day to the data. However, the end date is still wrong. I could really use some help in solving this issue.

there is no built-in solution, currently the end dates are not inclusive. Meaning that end_date = 23 June 2015 means that task ends at 00:00 23th of June, 23th is not covered.

What you can try to do, is to redefine a templates for a gantt grid in order to make it show the inclusive dates (note that table displays End date instead of start date):

It may be a bit trickier with setting duration in a lightbox. If you use a duration input there are only two places where the end date is displayed

These values are defined by gantt.templates.task_time and gantt.templates.task_date templates. Task time can be redefined quite easy, here is an updated example docs.dhtmlx.com/gantt/snippet/a8adda56
docs.dhtmlx.com/gantt/api__gantt … plate.html

Right now I cant see an easy way to modify a label at right of the duration input (as it uses task_date which used in several different places as well), probably you can trace the changes of the duration and update label manually.

With all this changes you’ll have an inclusive end dates in chart. Although note that database dates will still be not inclusive

UPDATE 2020-04-15

Now there is a template for changing the end date format in the lightbox

Thank you! I was able to get this to work. We are not using the default lightbox, so the only place I needed to change the end date was on the data_grid and tooltips.

Thanks again, and I really appreciate the quick replies!

Hi dteske25,

How did you managed the end date.We are also not using light box, only thing needs to be taken care is in the grid columns and chart.

Thanks in Advance.

I first started by adding a day to all the tasks. With the way work time works, this is the approach you want to take.

You first need to edit the actual un-minified library file, “dhtmlxgantt.js”. I found the method that was rendering the grid portion of the chart (roughly beings at line 1405, method is gantt._render_grid_item). There is a for loop, and inside that, the variable “value” is declared.
There is an if statement that checks if value is a Date, and in there, I checked if it was an end date, and then corrected it. I’ve attached my code, but I needed to do a few other unrelated things, so its a bit cut and pasted together. Let me know if this doesn’t work for you for the grid.

gantt._render_grid_item = function (item) {
	if (!gantt._is_grid_visible())
		return null;

	var columns = this.getGridColumns();
	var cells = [];
	var width = 0;
	for (var i = 0; i < columns.length; i++) {
		var last = i == columns.length - 1;
		var col = columns[i];
		var cell;

		var value;
		if (col.name == "add") {
			value = "<div class='gantt_add'></div>";
		} else {
			if (col.template)
				value = col.template(item);
				value = item[col.name];

			if (value instanceof Date) {
                                //CUSTOM LOGIC FOR CORRECTING END DATE
                                if (col.name == "end_date") {
                                     var tempEnd = new Date(value);
                                     tempEnd.setDate(tempEnd.getDate() - 1);
                                     value = this.templates.date_grid(tempEnd);
                                else {
                                    //Default rendering of dates
                                    value = this.templates.date_grid(value);
			value = "<div class='gantt_tree_content'>" + value + "</div>";
		var css = "gantt_cell" + (last ? " gantt_last_cell" : "");

		var tree = "";
		if (col.tree) {
			for (var j = 0; j < item.$level; j++)
				tree += this.templates.grid_indent(item);

			var has_child = this._has_children(item.id);
			if (has_child) {
				tree += this.templates.grid_open(item);
				tree += this.templates.grid_folder(item);
			} else {
				tree += this.templates.grid_blank(item);
				tree += this.templates.grid_file(item);
		var style = "width:" + (col.width - (last ? 1 : 0)) + "px;";
		if (dhtmlx.defined(col.align))
			style += "text-align:" + col.align + ";";
		cell = "<div class='" + css + "' style='" + style + "'>" + tree + value + "</div>";
	var css = item.$index % 2 === 0 ? "" : " odd";
	css += (item.$transparent) ? " gantt_transparent" : "";
	if (this.templates.grid_row_class) {
		var css_template = this.templates.grid_row_class.call(this, item.start_date, item.end_date, item);
		if (css_template)
			css += " " + css_template;

	if (this.getState().selected_task == item.id) {
		css += " gantt_selected";
	var el = document.createElement("div");
	el.className = "gantt_row" + css;
	el.style.height = this.config.row_height + "px";
	el.style.lineHeight = (gantt.config.row_height) + "px";
	el.setAttribute(this.config.task_attribute, item.id);
	el.innerHTML = cells.join("");
	return el;

As for the tooltip, that one was much easier. I just defined a template to subtract a day.

gantt.templates.tooltip_text = function (start, end, task) {
                var endDate = new Date(end);
                endDate.setDate(endDate.getDate() - 1);
                return "<b>Title: </b>" + task.text + "<br/><b>Starts:</b> " +         gantt.templates.tooltip_date_format(start) + "<br/><b>Ends:</b> " +
                    gantt.templates.tooltip_date_format(endDate) + "<br/><b>Duration: </b> " + task.duration + " day(s)<br/>");

This workaround only works if you are displaying the end date in the Grid side panel.

Is there not a setting for this in the application?

Seems like a very easy flag to control what end date means.