Today line

Gantt
#1

I need to implement a ‘today’ line, like ms project. I have tried the solution here:

viewtopic.php?f=15&t=32883

function taskcell(today) {
	return function (item, date) {
		return date.getTime() === today.getTime() ? "today" : "";
	};
}

gantt.templates.task_cell_class = taskcell(new Date("February 1, 2014"));

.today {
	background-color: rgba(255, 0, 0, 0.2);
}

However, this suffers from several problems:

  1. I need an actual line. I can use the class to create a red border, but this line goes down the left or right edge of the cell, not down the middle.

  2. When the scale is > day, (such as month), the solution highlights the entire month. In this case, I still need a line properly positioned in the month to show ‘today’.

  3. When the scale is week or year, the solution doesn’t seem to work at all. Nothing is highlighted. It works only for day and month.

Is there any better solution?

#2

Hi,
probably the easiest way would be adding this line with custom code
CSS:

.today_marker{ height: 100%; width: 2px; top:0; position: absolute; background-color: rgba(255, 0, 0, 0.4); }
JS:

[code]gantt.attachEvent(“onGanttReady”, function(){
var marker = document.createElement(“div”);
marker.className = “today_marker”;
gantt.$task_data.appendChild(marker);

function setPosition(){
	marker.style.left = gantt.posFromDate(new Date()) + "px";
}
setPosition();
setInterval(function(){
	setPosition();
}, 1000*60);//update each minute

});[/code]

#3

That gets me on the right track. Here’s what I came up with:

gantt.attachEvent("onGanttRender", onGanttRender_todayLine(new Date("February 13, 2014")));

function onGanttRender_todayLine(today) {
	function addDays(date, days) {
		var result = new Date(date);
		result.setDate(date.getDate() + days);
		return result;
	}
	return function f() {
		var $today = $("#today");
		if (!$today.length) {
			var elem = document.createElement("div");
			elem.id = "today";
			gantt.$task_data.appendChild(elem);
			$today = $(elem);
		}
		var x_start = gantt.posFromDate(today);
		var x_end = gantt.posFromDate(addDays(today, 1));
		$today.css("left", Math.floor(x_start + 0.5 * (x_end - x_start)) + "px");
	};
}

#today {
	height: 100%;
	width: 3px;
	top:0;
	position: absolute;
	background-color: rgba(255, 0, 0, 0.4);
}

I made a few changes:

  1. Use render event instead of ready event. This is so the line moves properly when the scale changes.
  2. Find and re-use the line div so that we don’t end up with multiple lines due to re-rendering.
  3. Position the line half way between “today” and “today+1” to make it show up in the middle of the day instead of at the beginning. This is less visible/important in the larger scales.

Other than that, it works great. You might consider adding built-in support for something like this. It has to be a pretty common requirement.