Show planned times on gantt chart while editing real times

etemplate/js/et2_widget_gantt.js

@@ -1011,6 +1011,31 @@ $j(function() {
 		}
 	};
 
+	gantt.templates.leftside_text = function(start, end, task) {
+		var text = '';
+		if(task.planned_start)
+		{
+			if(typeof task.planned_start == 'string') task.planned_start = new Date(task.planned_start);
+			var p_start = gantt.posFromDate(task.planned_start) - gantt.posFromDate(start);
+			text = "<div class='gantt_task_line gantt_task_planned' style='width:"+Math.abs(p_start)+"px; right:"+(p_start > 0 ? -p_start : 0)+"px; height:100%'><span>"
+				+ gantt.date.date_to_str(gantt.config.api_date)(task.planned_start)
+				+ "</span></div>";
+		}
+		return text;
+	};
+	gantt.templates.rightside_text = function(start, end, task) {
+		var text = '';
+		if(task.planned_end)
+		{
+			if(typeof task.planned_end == 'string') task.planned_end = new Date(task.planned_end);
+			var p_end = gantt.posFromDate(task.planned_end) - gantt.posFromDate(end);
+			text = "<div class='gantt_task_line gantt_task_planned' style='left:"+p_end +"px; height:100%'><span>"
+				+ gantt.date.date_to_str(gantt.config.api_date)(task.planned_end)
+				+ "</span></div>";
+		}
+		return text;
+	};
+
 	// Link styling
 	gantt.templates.link_class = function(link) {
 		var link_class = '';

etemplate/templates/default/etemplate2.css

@@ -1510,7 +1510,10 @@ div.ui-toolbar-menulist{
 {
 	background-size: 18px;
 }
-
+.et2_gantt .gantt_side_content
+{
+	overflow: visible;
+}
 .et2_gantt .gantt_task_progress
 {
 	text-align: left;
@@ -1544,6 +1547,36 @@ div.ui-toolbar-menulist{
 {
 	border-left-color: red;
 }
+.et2_gantt .gantt_task_planned
+{
+	margin-top: 7px;
+	position: absolute;
+	opacity: 0.3;
+	border-style: outset;
+	border-width: 2px;
+	border-top: none;
+	border-bottom: none;
+	width: 2px;
+}
+.et2_gantt .gantt_task_planned:hover span {
+	display:inline;
+}
+.et2_gantt .gantt_task_planned span
+{
+	z-index: 10;
+	display: none;
+	background: white;
+	position: relative;
+	top: 2em;
+}
+.et2_gantt .gantt_left .gantt_task_planned
+{
+	border-right: none;
+}
+.et2_gantt .gantt_right .gantt_task_planned
+{
+	border-left: none;
+}
 
 /**
  * Do not wrap content of a single widget incl. a label or children of a hbox.