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.
Hello,
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): docs.dhtmlx.com/gantt/snippet/f9378ac9
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 screencast.com/t/B61kRHNh
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
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!
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);
else
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>";
cells.push(cell);
}
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.