format hr date, styling overdue

edit-mode/function/humanResource.js

@@ -31,8 +31,14 @@ $(document).ready(function () {
         "columns": [
             { data: 'user_name', name: 'user_name' },
             { data: 'role_name', name: 'role_name' },
-            { data: 'start_date', name: 'start_date' },
-            { data: 'end_date', name: 'end_date' },
+            { data: 'start_date', name: 'start_date', render: function (data, type) {
+                return data ? formatDate(data) : '-'
+                } 
+            },
+            { data: 'end_date', name: 'end_date', render: function (data, type) {
+                return data ? formatDate(data) : '-'
+                } 
+            },
             {
                 data: 'action',
                 name: 'action',

view-mode/function/ganttConfig.js

@@ -383,8 +383,22 @@ gantt.templates.task_class = function (start, end, task) {
 gantt.templates.rightside_text = function (start, end, task) {
 	if (task.planned_end) {
 		if (end.getTime() > task.planned_end.getTime()) {
-			var overdue = Math.ceil(Math.abs((end.getTime() - task.planned_end.getTime()) / (24 * 60 * 60 * 1000)));
-			var text = "<b>Overdue: " + overdue + " days</b>";
+			// var overdue = Math.ceil(Math.abs((end.getTime() - task.planned_end.getTime()) / (24 * 60 * 60 * 1000)));
+			// var text = "<b>Overdue: " + overdue + " days</b>";
+			// return text;
+            var plannedEndDate = gantt.calculateEndDate({
+				start_date: task.start_date,
+				duration: gantt.calculateDuration({
+					start_date: task.start_date,
+					end_date: task.planned_end
+				})
+			});
+			var overdue = gantt.calculateDuration({
+				start_date: plannedEndDate,
+				end_date: end,
+				task: task
+			}, 'day');
+			var text = "<b style='color: red;'>Overdue: " + overdue + " days</b>";
 			return text;
 		}
 	}