jsgantt-improved 2.8.2 → 2.8.5

package/dist/src/draw.js

@@ -53,7 +53,7 @@ exports.GanttChart = function (pDiv, pFormat) {
         3: true,
         4: true,
         5: true,
-        6: true
+        6: true,
     };
     this.vEventClickCollapse = null;
     this.vEventClickRow = null;
@@ -72,7 +72,7 @@ exports.GanttChart = function (pDiv, pFormat) {
         beforeLineDraw: null,
         afterLineDraw: null,
         onLineDraw: null,
-        onLineContainerHover: null
+        onLineContainerHover: null,
     };
     this.vEventsChange = {
         taskname: null,
@@ -84,36 +84,36 @@ exports.GanttChart = function (pDiv, pFormat) {
         planstartdate: null,
         planenddate: null,
         cost: null,
-        line: null
+        line: null,
     };
     this.vResources = null;
     this.vAdditionalHeaders = {};
     this.vColumnOrder = draw_columns_1.COLUMN_ORDER;
     this.vEditable = false;
     this.vDebug = false;
-    this.vShowSelector = new Array('top');
-    this.vDateInputFormat = 'yyyy-mm-dd';
-    this.vDateTaskTableDisplayFormat = date_utils_1.parseDateFormatStr('dd/mm/yyyy');
-    this.vDateTaskDisplayFormat = date_utils_1.parseDateFormatStr('dd month yyyy');
-    this.vHourMajorDateDisplayFormat = date_utils_1.parseDateFormatStr('day dd month yyyy');
-    this.vHourMinorDateDisplayFormat = date_utils_1.parseDateFormatStr('HH');
-    this.vDayMajorDateDisplayFormat = date_utils_1.parseDateFormatStr('dd/mm/yyyy');
-    this.vDayMinorDateDisplayFormat = date_utils_1.parseDateFormatStr('dd');
-    this.vWeekMajorDateDisplayFormat = date_utils_1.parseDateFormatStr('yyyy');
-    this.vWeekMinorDateDisplayFormat = date_utils_1.parseDateFormatStr('dd/mm');
-    this.vMonthMajorDateDisplayFormat = date_utils_1.parseDateFormatStr('yyyy');
-    this.vMonthMinorDateDisplayFormat = date_utils_1.parseDateFormatStr('mon');
-    this.vQuarterMajorDateDisplayFormat = date_utils_1.parseDateFormatStr('yyyy');
-    this.vQuarterMinorDateDisplayFormat = date_utils_1.parseDateFormatStr('qq');
-    this.vUseFullYear = date_utils_1.parseDateFormatStr('dd/mm/yyyy');
+    this.vShowSelector = new Array("top");
+    this.vDateInputFormat = "yyyy-mm-dd";
+    this.vDateTaskTableDisplayFormat = date_utils_1.parseDateFormatStr("dd/mm/yyyy");
+    this.vDateTaskDisplayFormat = date_utils_1.parseDateFormatStr("dd month yyyy");
+    this.vHourMajorDateDisplayFormat = date_utils_1.parseDateFormatStr("day dd month yyyy");
+    this.vHourMinorDateDisplayFormat = date_utils_1.parseDateFormatStr("HH");
+    this.vDayMajorDateDisplayFormat = date_utils_1.parseDateFormatStr("dd/mm/yyyy");
+    this.vDayMinorDateDisplayFormat = date_utils_1.parseDateFormatStr("dd");
+    this.vWeekMajorDateDisplayFormat = date_utils_1.parseDateFormatStr("yyyy");
+    this.vWeekMinorDateDisplayFormat = date_utils_1.parseDateFormatStr("dd/mm");
+    this.vMonthMajorDateDisplayFormat = date_utils_1.parseDateFormatStr("yyyy");
+    this.vMonthMinorDateDisplayFormat = date_utils_1.parseDateFormatStr("mon");
+    this.vQuarterMajorDateDisplayFormat = date_utils_1.parseDateFormatStr("yyyy");
+    this.vQuarterMinorDateDisplayFormat = date_utils_1.parseDateFormatStr("qq");
+    this.vUseFullYear = date_utils_1.parseDateFormatStr("dd/mm/yyyy");
     this.vCaptionType;
     this.vDepId = 1;
     this.vTaskList = new Array();
-    this.vFormatArr = new Array('hour', 'day', 'week', 'month', 'quarter');
+    this.vFormatArr = new Array("hour", "day", "week", "month", "quarter");
     this.vMonthDaysArr = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
     this.vProcessNeeded = true;
     this.vMinGpLen = 8;
-    this.vScrollTo = '';
+    this.vScrollTo = "";
     this.vHourColWidth = 18;
     this.vDayColWidth = 18;
     this.vWeekColWidth = 36;
@@ -122,7 +122,7 @@ exports.GanttChart = function (pDiv, pFormat) {
     this.vRowHeight = 20;
     this.vTodayPx = -1;
     this.vLangs = lang;
-    this.vLang = navigator.language && navigator.language in lang ? navigator.language : 'en';
+    this.vLang = navigator.language && navigator.language in lang ? navigator.language : "en";
     this.vChartBody = null;
     this.vChartHead = null;
     this.vListBody = null;
@@ -156,10 +156,9 @@ exports.GanttChart = function (pDiv, pFormat) {
     this.printChart = general_utils_1.printChart.bind(this);
     this.clearDependencies = function () {
         var parent = this.getLines();
-        if (this.vEventsChange.line &&
-            typeof this.vEventsChange.line === 'function') {
-            this.removeListener('click', this.vEventsChange.line, parent);
-            this.addListener('click', this.vEventsChange.line, parent);
+        if (this.vEventsChange.line && typeof this.vEventsChange.line === "function") {
+            this.removeListener("click", this.vEventsChange.line, parent);
+            this.addListener("click", this.vEventsChange.line, parent);
         }
         while (parent.hasChildNodes())
             parent.removeChild(parent.firstChild);
@@ -167,20 +166,20 @@ exports.GanttChart = function (pDiv, pFormat) {
     };
     this.drawListHead = function (vLeftHeader) {
         var _this = this;
-        var vTmpDiv = draw_utils_1.newNode(vLeftHeader, 'div', this.vDivId + 'glisthead', 'glistlbl gcontainercol');
+        var vTmpDiv = draw_utils_1.newNode(vLeftHeader, "div", this.vDivId + "glisthead", "glistlbl gcontainercol");
         var gListLbl = vTmpDiv;
         this.setListBody(vTmpDiv);
-        var vTmpTab = draw_utils_1.newNode(vTmpDiv, 'table', null, 'gtasktableh');
-        var vTmpTBody = draw_utils_1.newNode(vTmpTab, 'tbody');
-        var vTmpRow = draw_utils_1.newNode(vTmpTBody, 'tr');
-        draw_utils_1.newNode(vTmpRow, 'td', null, 'gtasklist', '\u00A0');
-        var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, 'gspanning gtaskname', null, null, null, null, this.getColumnOrder().length + 1);
-        vTmpCell.appendChild(this.drawSelector('top'));
-        vTmpRow = draw_utils_1.newNode(vTmpTBody, 'tr');
-        draw_utils_1.newNode(vTmpRow, 'td', null, 'gtasklist', '\u00A0');
-        draw_utils_1.newNode(vTmpRow, 'td', null, 'gtaskname', '\u00A0');
+        var vTmpTab = draw_utils_1.newNode(vTmpDiv, "table", null, "gtasktableh");
+        var vTmpTBody = draw_utils_1.newNode(vTmpTab, "tbody");
+        var vTmpRow = draw_utils_1.newNode(vTmpTBody, "tr");
+        draw_utils_1.newNode(vTmpRow, "td", null, "gtasklist", "\u00A0");
+        var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, "gspanning gtaskname", null, null, null, null, this.getColumnOrder().length + 1);
+        vTmpCell.appendChild(this.drawSelector("top"));
+        vTmpRow = draw_utils_1.newNode(vTmpTBody, "tr");
+        draw_utils_1.newNode(vTmpRow, "td", null, "gtasklist", "\u00A0");
+        draw_utils_1.newNode(vTmpRow, "td", null, "gtaskname", "\u00A0");
         this.getColumnOrder().forEach(function (column) {
-            if (_this[column] == 1 || column === 'vAdditionalHeaders') {
+            if (_this[column] == 1 || column === "vAdditionalHeaders") {
                 draw_columns_1.draw_task_headings(column, vTmpRow, _this.vLangs, _this.vLang, _this.vAdditionalHeaders, _this.vEvents);
             }
         });
@@ -188,38 +187,38 @@ exports.GanttChart = function (pDiv, pFormat) {
     };
     this.drawListBody = function (vLeftHeader) {
         var _this = this;
-        var vTmpContentTabOuterWrapper = draw_utils_1.newNode(vLeftHeader, 'div', null, 'gtasktableouterwrapper');
-        var vTmpContentTabWrapper = draw_utils_1.newNode(vTmpContentTabOuterWrapper, 'div', null, 'gtasktablewrapper');
+        var vTmpContentTabOuterWrapper = draw_utils_1.newNode(vLeftHeader, "div", null, "gtasktableouterwrapper");
+        var vTmpContentTabWrapper = draw_utils_1.newNode(vTmpContentTabOuterWrapper, "div", null, "gtasktablewrapper");
         vTmpContentTabWrapper.style.width = "calc(100% + " + general_utils_1.getScrollbarWidth() + "px)";
-        var vTmpContentTab = draw_utils_1.newNode(vTmpContentTabWrapper, 'table', null, 'gtasktable');
-        var vTmpContentTBody = draw_utils_1.newNode(vTmpContentTab, 'tbody');
+        var vTmpContentTab = draw_utils_1.newNode(vTmpContentTabWrapper, "table", null, "gtasktable");
+        var vTmpContentTBody = draw_utils_1.newNode(vTmpContentTab, "tbody");
         var vNumRows = 0;
         var _loop_1 = function (i) {
             var vBGColor = void 0;
             if (this_1.vTaskList[i].getGroup() == 1)
-                vBGColor = 'ggroupitem';
+                vBGColor = "ggroupitem";
             else
-                vBGColor = 'glineitem';
+                vBGColor = "glineitem a";
             var vID = this_1.vTaskList[i].getID();
             var vTmpRow_1, vTmpCell_1 = void 0;
-            if ((!(this_1.vTaskList[i].getParItem() && this_1.vTaskList[i].getParItem().getGroup() == 2)) || this_1.vTaskList[i].getGroup() == 2) {
+            if (!(this_1.vTaskList[i].getParItem() && this_1.vTaskList[i].getParItem().getGroup() == 2) || this_1.vTaskList[i].getGroup() == 2) {
                 if (this_1.vTaskList[i].getVisible() == 0)
-                    vTmpRow_1 = draw_utils_1.newNode(vTmpContentTBody, 'tr', this_1.vDivId + 'child_' + vID, 'gname ' + vBGColor, null, null, null, 'none');
+                    vTmpRow_1 = draw_utils_1.newNode(vTmpContentTBody, "tr", this_1.vDivId + "child_" + vID, "gname " + vBGColor, null, null, null, "none");
                 else
-                    vTmpRow_1 = draw_utils_1.newNode(vTmpContentTBody, 'tr', this_1.vDivId + 'child_' + vID, 'gname ' + vBGColor);
+                    vTmpRow_1 = draw_utils_1.newNode(vTmpContentTBody, "tr", this_1.vDivId + "child_" + vID, "gname " + vBGColor);
                 this_1.vTaskList[i].setListChildRow(vTmpRow_1);
-                draw_utils_1.newNode(vTmpRow_1, 'td', null, 'gtasklist', '\u00A0');
-                var editableClass = this_1.vEditable ? 'gtaskname gtaskeditable' : 'gtaskname';
-                vTmpCell_1 = draw_utils_1.newNode(vTmpRow_1, 'td', null, editableClass);
-                var vCellContents = '';
+                draw_utils_1.newNode(vTmpRow_1, "td", null, "gtasklist", "\u00A0");
+                var editableClass = this_1.vEditable ? "gtaskname gtaskeditable" : "gtaskname";
+                vTmpCell_1 = draw_utils_1.newNode(vTmpRow_1, "td", null, editableClass);
+                var vCellContents = "";
                 for (var j = 1; j < this_1.vTaskList[i].getLevel(); j++) {
-                    vCellContents += '\u00A0\u00A0\u00A0\u00A0';
+                    vCellContents += "\u00A0\u00A0\u00A0\u00A0";
                 }
                 var task_2 = this_1.vTaskList[i];
                 var vEventClickRow_1 = this_1.vEventClickRow;
                 var vEventClickCollapse_1 = this_1.vEventClickCollapse;
-                events_1.addListener('click', function (e) {
-                    if (e.target.classList.contains('gfoldercollapse') === false) {
+                events_1.addListener("click", function (e) {
+                    if (e.target.classList.contains("gfoldercollapse") === false) {
                         if (vEventClickRow_1 && typeof vEventClickRow_1 === "function") {
                             vEventClickRow_1(task_2);
                         }
@@ -231,29 +230,29 @@ exports.GanttChart = function (pDiv, pFormat) {
                     }
                 }, vTmpRow_1);
                 if (this_1.vTaskList[i].getGroup() == 1) {
-                    var vTmpDiv = draw_utils_1.newNode(vTmpCell_1, 'div', null, null, vCellContents);
-                    var vTmpSpan = draw_utils_1.newNode(vTmpDiv, 'span', this_1.vDivId + 'group_' + vID, 'gfoldercollapse', (this_1.vTaskList[i].getOpen() == 1) ? '-' : '+');
+                    var vTmpDiv = draw_utils_1.newNode(vTmpCell_1, "div", null, null, vCellContents);
+                    var vTmpSpan = draw_utils_1.newNode(vTmpDiv, "span", this_1.vDivId + "group_" + vID, "gfoldercollapse", this_1.vTaskList[i].getOpen() == 1 ? "-" : "+");
                     this_1.vTaskList[i].setGroupSpan(vTmpSpan);
                     events_1.addFolderListeners(this_1, vTmpSpan, vID);
-                    var divTask = document.createElement('span');
-                    divTask.innerHTML = '\u00A0' + this_1.vTaskList[i].getName();
+                    var divTask = document.createElement("span");
+                    divTask.innerHTML = "\u00A0" + this_1.vTaskList[i].getName();
                     vTmpDiv.appendChild(divTask);
                     // const text = makeInput(this.vTaskList[i].getName(), this.vEditable, 'text');
                     // vTmpDiv.appendChild(document.createNode(text));
                     var callback = function (task, e) { return task.setName(e.target.value); };
-                    events_1.addListenerInputCell(vTmpCell_1, this_1.vEventsChange, callback, this_1.vTaskList, i, 'taskname', this_1.Draw.bind(this_1));
-                    events_1.addListenerClickCell(vTmpDiv, this_1.vEvents, this_1.vTaskList[i], 'taskname');
+                    events_1.addListenerInputCell(vTmpCell_1, this_1.vEventsChange, callback, this_1.vTaskList, i, "taskname", this_1.Draw.bind(this_1));
+                    events_1.addListenerClickCell(vTmpDiv, this_1.vEvents, this_1.vTaskList[i], "taskname");
                 }
                 else {
-                    vCellContents += '\u00A0\u00A0\u00A0\u00A0';
-                    var text = draw_utils_1.makeInput(this_1.vTaskList[i].getName(), this_1.vEditable, 'text');
-                    var vTmpDiv = draw_utils_1.newNode(vTmpCell_1, 'div', null, null, vCellContents + text);
+                    vCellContents += "\u00A0\u00A0\u00A0\u00A0";
+                    var text = draw_utils_1.makeInput(this_1.vTaskList[i].getName(), this_1.vEditable, "text");
+                    var vTmpDiv = draw_utils_1.newNode(vTmpCell_1, "div", null, null, vCellContents + text);
                     var callback = function (task, e) { return task.setName(e.target.value); };
-                    events_1.addListenerInputCell(vTmpCell_1, this_1.vEventsChange, callback, this_1.vTaskList, i, 'taskname', this_1.Draw.bind(this_1));
-                    events_1.addListenerClickCell(vTmpCell_1, this_1.vEvents, this_1.vTaskList[i], 'taskname');
+                    events_1.addListenerInputCell(vTmpCell_1, this_1.vEventsChange, callback, this_1.vTaskList, i, "taskname", this_1.Draw.bind(this_1));
+                    events_1.addListenerClickCell(vTmpCell_1, this_1.vEvents, this_1.vTaskList[i], "taskname");
                 }
                 this_1.getColumnOrder().forEach(function (column) {
-                    if (_this[column] == 1 || column === 'vAdditionalHeaders') {
+                    if (_this[column] == 1 || column === "vAdditionalHeaders") {
                         draw_columns_1.draw_header(column, i, vTmpRow_1, _this.vTaskList, _this.vEditable, _this.vEventsChange, _this.vEvents, _this.vDateTaskTableDisplayFormat, _this.vAdditionalHeaders, _this.vFormat, _this.vLangs, _this.vLang, _this.vResources, _this.Draw.bind(_this));
                     }
                 });
@@ -266,23 +265,21 @@ exports.GanttChart = function (pDiv, pFormat) {
         }
         // Render no daa in the chart
         if (this.vTaskList.length == 0) {
-            var totalColumns = this.getColumnOrder()
-                .filter(function (column) { return _this[column] == 1 || column === 'vAdditionalHeaders'; })
-                .length;
-            var vTmpRow_2 = draw_utils_1.newNode(vTmpContentTBody, 'tr', this.vDivId + 'child_', 'gname ');
+            var totalColumns = this.getColumnOrder().filter(function (column) { return _this[column] == 1 || column === "vAdditionalHeaders"; }).length;
+            var vTmpRow_2 = draw_utils_1.newNode(vTmpContentTBody, "tr", this.vDivId + "child_", "gname ");
             // this.vTaskList[i].setListChildRow(vTmpRow);
-            var vTmpCell_2 = draw_utils_1.newNode(vTmpRow_2, 'td', null, 'gtasknolist', '', null, null, null, totalColumns);
+            var vTmpCell_2 = draw_utils_1.newNode(vTmpRow_2, "td", null, "gtasknolist", "", null, null, null, totalColumns);
             var vOutput = document.createDocumentFragment();
-            draw_utils_1.newNode(vOutput, 'div', null, 'gtasknolist-label', this.vLangs[this.vLang]['nodata'] + '.');
+            draw_utils_1.newNode(vOutput, "div", null, "gtasknolist-label", this.vLangs[this.vLang]["nodata"] + ".");
             vTmpCell_2.appendChild(vOutput);
         }
         // DRAW the date format selector at bottom left.
-        var vTmpRow = draw_utils_1.newNode(vTmpContentTBody, 'tr');
-        draw_utils_1.newNode(vTmpRow, 'td', null, 'gtasklist', '\u00A0');
-        var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, 'gspanning gtaskname');
-        vTmpCell.appendChild(this.drawSelector('bottom'));
+        var vTmpRow = draw_utils_1.newNode(vTmpContentTBody, "tr");
+        draw_utils_1.newNode(vTmpRow, "td", null, "gtasklist", "\u00A0");
+        var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, "gspanning gtaskname");
+        vTmpCell.appendChild(this.drawSelector("bottom"));
         this.getColumnOrder().forEach(function (column) {
-            if (_this[column] == 1 || column === 'vAdditionalHeaders') {
+            if (_this[column] == 1 || column === "vAdditionalHeaders") {
                 draw_columns_1.draw_bottom(column, vTmpRow, _this.vAdditionalHeaders);
             }
         });
@@ -292,7 +289,7 @@ exports.GanttChart = function (pDiv, pFormat) {
         // newNode(vTmpDiv2, 'br');
         return {
             vNumRows: vNumRows,
-            vTmpContentTabWrapper: vTmpContentTabWrapper
+            vTmpContentTabWrapper: vTmpContentTabWrapper,
         };
     };
     /**
@@ -302,15 +299,15 @@ exports.GanttChart = function (pDiv, pFormat) {
      */
     this.drawChartHead = function (vMinDate, vMaxDate, vColWidth, vNumRows) {
         var vRightHeader = document.createDocumentFragment();
-        var vTmpDiv = draw_utils_1.newNode(vRightHeader, 'div', this.vDivId + 'gcharthead', 'gchartlbl gcontainercol');
+        var vTmpDiv = draw_utils_1.newNode(vRightHeader, "div", this.vDivId + "gcharthead", "gchartlbl gcontainercol");
         var gChartLbl = vTmpDiv;
         this.setChartHead(vTmpDiv);
-        var vTmpTab = draw_utils_1.newNode(vTmpDiv, 'table', this.vDivId + 'chartTableh', 'gcharttableh');
-        var vTmpTBody = draw_utils_1.newNode(vTmpTab, 'tbody');
-        var vTmpRow = draw_utils_1.newNode(vTmpTBody, 'tr');
+        var vTmpTab = draw_utils_1.newNode(vTmpDiv, "table", this.vDivId + "chartTableh", "gcharttableh");
+        var vTmpTBody = draw_utils_1.newNode(vTmpTab, "tbody");
+        var vTmpRow = draw_utils_1.newNode(vTmpTBody, "tr");
         var vTmpDate = new Date();
         vTmpDate.setFullYear(vMinDate.getFullYear(), vMinDate.getMonth(), vMinDate.getDate());
-        if (this.vFormat == 'hour')
+        if (this.vFormat == "hour")
             vTmpDate.setHours(vMinDate.getHours());
         else
             vTmpDate.setHours(0);
@@ -320,90 +317,88 @@ exports.GanttChart = function (pDiv, pFormat) {
         var vColSpan = 1;
         // Major Date Header
         while (vTmpDate.getTime() <= vMaxDate.getTime()) {
-            var vHeaderCellClass = 'gmajorheading';
-            var vCellContents = '';
-            if (this.vFormat == 'day') {
+            var vHeaderCellClass = "gmajorheading";
+            var vCellContents = "";
+            if (this.vFormat == "day") {
                 var colspan = 7;
                 if (!this.vShowWeekends) {
-                    vHeaderCellClass += ' headweekends';
+                    vHeaderCellClass += " headweekends";
                     colspan = 5;
                 }
-                var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vHeaderCellClass, null, null, null, null, colspan);
+                var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vHeaderCellClass, null, null, null, null, colspan);
                 vCellContents += date_utils_1.formatDateStr(vTmpDate, this.vDayMajorDateDisplayFormat, this.vLangs[this.vLang]);
                 vTmpDate.setDate(vTmpDate.getDate() + 6);
                 if (this.vShowEndWeekDate == 1)
-                    vCellContents += ' - ' + date_utils_1.formatDateStr(vTmpDate, this.vDayMajorDateDisplayFormat, this.vLangs[this.vLang]);
-                draw_utils_1.newNode(vTmpCell, 'div', null, null, vCellContents, vColWidth * colspan);
+                    vCellContents += " - " + date_utils_1.formatDateStr(vTmpDate, this.vDayMajorDateDisplayFormat, this.vLangs[this.vLang]);
+                draw_utils_1.newNode(vTmpCell, "div", null, null, vCellContents, vColWidth * colspan);
                 vTmpDate.setDate(vTmpDate.getDate() + 1);
             }
-            else if (this.vFormat == 'week') {
-                var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vHeaderCellClass, null, vColWidth);
-                draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vWeekMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
+            else if (this.vFormat == "week") {
+                var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vHeaderCellClass, null, vColWidth);
+                draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vWeekMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
                 vTmpDate.setDate(vTmpDate.getDate() + 7);
             }
-            else if (this.vFormat == 'month') {
-                vColSpan = (12 - vTmpDate.getMonth());
+            else if (this.vFormat == "month") {
+                vColSpan = 12 - vTmpDate.getMonth();
                 if (vTmpDate.getFullYear() == vMaxDate.getFullYear())
-                    vColSpan -= (11 - vMaxDate.getMonth());
-                var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vHeaderCellClass, null, null, null, null, vColSpan);
-                draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vMonthMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth * vColSpan);
+                    vColSpan -= 11 - vMaxDate.getMonth();
+                var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vHeaderCellClass, null, null, null, null, vColSpan);
+                draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vMonthMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth * vColSpan);
                 vTmpDate.setFullYear(vTmpDate.getFullYear() + 1, 0, 1);
             }
-            else if (this.vFormat == 'quarter') {
-                vColSpan = (4 - Math.floor(vTmpDate.getMonth() / 3));
+            else if (this.vFormat == "quarter") {
+                vColSpan = 4 - Math.floor(vTmpDate.getMonth() / 3);
                 if (vTmpDate.getFullYear() == vMaxDate.getFullYear())
-                    vColSpan -= (3 - Math.floor(vMaxDate.getMonth() / 3));
-                var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vHeaderCellClass, null, null, null, null, vColSpan);
-                draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vQuarterMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth * vColSpan);
+                    vColSpan -= 3 - Math.floor(vMaxDate.getMonth() / 3);
+                var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vHeaderCellClass, null, null, null, null, vColSpan);
+                draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vQuarterMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth * vColSpan);
                 vTmpDate.setFullYear(vTmpDate.getFullYear() + 1, 0, 1);
             }
-            else if (this.vFormat == 'hour') {
-                vColSpan = (24 - vTmpDate.getHours());
-                if (vTmpDate.getFullYear() == vMaxDate.getFullYear() &&
-                    vTmpDate.getMonth() == vMaxDate.getMonth() &&
-                    vTmpDate.getDate() == vMaxDate.getDate())
-                    vColSpan -= (23 - vMaxDate.getHours());
-                var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vHeaderCellClass, null, null, null, null, vColSpan);
-                draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vHourMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth * vColSpan);
+            else if (this.vFormat == "hour") {
+                vColSpan = 24 - vTmpDate.getHours();
+                if (vTmpDate.getFullYear() == vMaxDate.getFullYear() && vTmpDate.getMonth() == vMaxDate.getMonth() && vTmpDate.getDate() == vMaxDate.getDate())
+                    vColSpan -= 23 - vMaxDate.getHours();
+                var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vHeaderCellClass, null, null, null, null, vColSpan);
+                draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vHourMajorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth * vColSpan);
                 vTmpDate.setHours(0);
                 vTmpDate.setDate(vTmpDate.getDate() + 1);
             }
         }
-        vTmpRow = draw_utils_1.newNode(vTmpTBody, 'tr', null, 'footerdays');
+        vTmpRow = draw_utils_1.newNode(vTmpTBody, "tr", null, "footerdays");
         // Minor Date header and Cell Rows
         vTmpDate.setFullYear(vMinDate.getFullYear(), vMinDate.getMonth(), vMinDate.getDate()); // , vMinDate.getHours()
-        if (this.vFormat == 'hour')
+        if (this.vFormat == "hour")
             vTmpDate.setHours(vMinDate.getHours());
         var vNumCols = 0;
         while (vTmpDate.getTime() <= vMaxDate.getTime()) {
-            var vMinorHeaderCellClass = 'gminorheading';
-            if (this.vFormat == 'day') {
+            var vMinorHeaderCellClass = "gminorheading";
+            if (this.vFormat == "day") {
                 if (vTmpDate.getDay() % 6 == 0) {
                     if (!this.vShowWeekends) {
                         vTmpDate.setDate(vTmpDate.getDate() + 1);
                         continue;
                     }
-                    vMinorHeaderCellClass += 'wkend';
+                    vMinorHeaderCellClass += "wkend";
                 }
                 if (vTmpDate <= vMaxDate) {
-                    var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vMinorHeaderCellClass);
-                    draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vDayMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
+                    var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vMinorHeaderCellClass);
+                    draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vDayMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
                     vNumCols++;
                 }
                 vTmpDate.setDate(vTmpDate.getDate() + 1);
             }
-            else if (this.vFormat == 'week') {
+            else if (this.vFormat == "week") {
                 if (vTmpDate <= vMaxDate) {
-                    var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vMinorHeaderCellClass);
-                    draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vWeekMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
+                    var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vMinorHeaderCellClass);
+                    draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vWeekMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
                     vNumCols++;
                 }
                 vTmpDate.setDate(vTmpDate.getDate() + 7);
             }
-            else if (this.vFormat == 'month') {
+            else if (this.vFormat == "month") {
                 if (vTmpDate <= vMaxDate) {
-                    var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vMinorHeaderCellClass);
-                    draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vMonthMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
+                    var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vMinorHeaderCellClass);
+                    draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vMonthMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
                     vNumCols++;
                 }
                 vTmpDate.setDate(vTmpDate.getDate() + 1);
@@ -411,22 +406,22 @@ exports.GanttChart = function (pDiv, pFormat) {
                     vTmpDate.setDate(vTmpDate.getDate() + 1);
                 }
             }
-            else if (this.vFormat == 'quarter') {
+            else if (this.vFormat == "quarter") {
                 if (vTmpDate <= vMaxDate) {
-                    var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vMinorHeaderCellClass);
-                    draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vQuarterMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
+                    var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vMinorHeaderCellClass);
+                    draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vQuarterMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
                     vNumCols++;
                 }
                 vTmpDate.setDate(vTmpDate.getDate() + 81);
                 while (vTmpDate.getDate() > 1)
                     vTmpDate.setDate(vTmpDate.getDate() + 1);
             }
-            else if (this.vFormat == 'hour') {
+            else if (this.vFormat == "hour") {
                 for (var i = vTmpDate.getHours(); i < 24; i++) {
                     vTmpDate.setHours(i); //works around daylight savings but may look a little odd on days where the clock goes forward
                     if (vTmpDate <= vMaxDate) {
-                        var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, vMinorHeaderCellClass);
-                        draw_utils_1.newNode(vTmpCell, 'div', null, null, date_utils_1.formatDateStr(vTmpDate, this.vHourMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
+                        var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, vMinorHeaderCellClass);
+                        draw_utils_1.newNode(vTmpCell, "div", null, null, date_utils_1.formatDateStr(vTmpDate, this.vHourMinorDateDisplayFormat, this.vLangs[this.vLang]), vColWidth);
                         vNumCols++;
                     }
                 }
@@ -436,18 +431,18 @@ exports.GanttChart = function (pDiv, pFormat) {
         }
         var vDateRow = vTmpRow;
         // Calculate size of grids  : Plus 3 because 1 border left + 2 of paddings
-        var vTaskLeftPx = (vNumCols * (vColWidth + 3)) + 1;
+        var vTaskLeftPx = vNumCols * (vColWidth + 3) + 1;
         // Fix a small space at the end for day
-        if (this.vFormat === 'day') {
+        if (this.vFormat === "day") {
             vTaskLeftPx += 2;
         }
-        vTmpTab.style.width = vTaskLeftPx + 'px'; // Ensure that the headings has exactly the same width as the chart grid
+        vTmpTab.style.width = vTaskLeftPx + "px"; // Ensure that the headings has exactly the same width as the chart grid
         // const vTaskPlanLeftPx = (vNumCols * (vColWidth + 3)) + 1;
         var vSingleCell = false;
-        if (this.vUseSingleCell !== 0 && this.vUseSingleCell < (vNumCols * vNumRows))
+        if (this.vUseSingleCell !== 0 && this.vUseSingleCell < vNumCols * vNumRows)
             vSingleCell = true;
-        draw_utils_1.newNode(vTmpDiv, 'div', null, 'rhscrpad', null, null, vTaskLeftPx + 1);
-        vTmpDiv = draw_utils_1.newNode(vRightHeader, 'div', null, 'glabelfooter');
+        draw_utils_1.newNode(vTmpDiv, "div", null, "rhscrpad", null, null, vTaskLeftPx + 1);
+        vTmpDiv = draw_utils_1.newNode(vRightHeader, "div", null, "glabelfooter");
         return { gChartLbl: gChartLbl, vTaskLeftPx: vTaskLeftPx, vSingleCell: vSingleCell, vDateRow: vDateRow, vRightHeader: vRightHeader, vNumCols: vNumCols };
     };
     /**
@@ -457,23 +452,23 @@ exports.GanttChart = function (pDiv, pFormat) {
      */
     this.drawCharBody = function (vTaskLeftPx, vTmpContentTabWrapper, gChartLbl, gListLbl, vMinDate, vMaxDate, vSingleCell, vNumCols, vColWidth, vDateRow) {
         var vRightTable = document.createDocumentFragment();
-        var vTmpDiv = draw_utils_1.newNode(vRightTable, 'div', this.vDivId + 'gchartbody', 'gchartgrid gcontainercol');
+        var vTmpDiv = draw_utils_1.newNode(vRightTable, "div", this.vDivId + "gchartbody", "gchartgrid gcontainercol");
         this.setChartBody(vTmpDiv);
-        var vTmpTab = draw_utils_1.newNode(vTmpDiv, 'table', this.vDivId + 'chartTable', 'gcharttable', null, vTaskLeftPx);
+        var vTmpTab = draw_utils_1.newNode(vTmpDiv, "table", this.vDivId + "chartTable", "gcharttable", null, vTaskLeftPx);
         this.setChartTable(vTmpTab);
-        draw_utils_1.newNode(vTmpDiv, 'div', null, 'rhscrpad', null, null, vTaskLeftPx + 1);
-        var vTmpTBody = draw_utils_1.newNode(vTmpTab, 'tbody');
-        var vTmpTFoot = draw_utils_1.newNode(vTmpTab, 'tfoot');
-        events_1.syncScroll([vTmpContentTabWrapper, vTmpDiv], 'scrollTop');
-        events_1.syncScroll([gChartLbl, vTmpDiv], 'scrollLeft');
-        events_1.syncScroll([vTmpContentTabWrapper, gListLbl], 'scrollLeft');
+        draw_utils_1.newNode(vTmpDiv, "div", null, "rhscrpad", null, null, vTaskLeftPx + 1);
+        var vTmpTBody = draw_utils_1.newNode(vTmpTab, "tbody");
+        var vTmpTFoot = draw_utils_1.newNode(vTmpTab, "tfoot");
+        events_1.syncScroll([vTmpContentTabWrapper, vTmpDiv], "scrollTop");
+        events_1.syncScroll([gChartLbl, vTmpDiv], "scrollLeft");
+        events_1.syncScroll([vTmpContentTabWrapper, gListLbl], "scrollLeft");
         // Draw each row
         var i = 0;
         var j = 0;
         var bd;
         if (this.vDebug) {
             bd = new Date();
-            console.info('before tasks loop', bd);
+            console.info("before tasks loop", bd);
         }
         for (i = 0; i < this.vTaskList.length; i++) {
             var curTaskStart = this.vTaskList[i].getStart() ? this.vTaskList[i].getStart() : this.vTaskList[i].getPlanStart();
@@ -490,31 +485,31 @@ exports.GanttChart = function (pDiv, pFormat) {
                 vTaskPlanRightPx = general_utils_1.getOffset(curTaskPlanStart, curTaskPlanEnd, vColWidth, this.vFormat, this.vShowWeekends);
             }
             var vID = this.vTaskList[i].getID();
-            var vComb = (this.vTaskList[i].getParItem() && this.vTaskList[i].getParItem().getGroup() == 2);
-            var vCellFormat = '';
+            var vComb = this.vTaskList[i].getParItem() && this.vTaskList[i].getParItem().getGroup() == 2;
+            var vCellFormat = "";
             var vTmpDiv_1 = null;
             var vTmpItem = this.vTaskList[i];
             var vCaptClass = null;
             // set cell width only for first row because of table-layout:fixed
             var taskCellWidth = i === 0 ? vColWidth : null;
             if (this.vTaskList[i].getMile() && !vComb) {
-                var vTmpRow = draw_utils_1.newNode(vTmpTBody, 'tr', this.vDivId + 'childrow_' + vID, 'gmileitem gmile' + this.vFormat, null, null, null, ((this.vTaskList[i].getVisible() == 0) ? 'none' : null));
+                var vTmpRow = draw_utils_1.newNode(vTmpTBody, "tr", this.vDivId + "childrow_" + vID, "gmileitem gmile" + this.vFormat, null, null, null, this.vTaskList[i].getVisible() == 0 ? "none" : null);
                 this.vTaskList[i].setChildRow(vTmpRow);
                 events_1.addThisRowListeners(this, this.vTaskList[i].getListChildRow(), vTmpRow);
-                var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, 'gtaskcell gtaskcellmile', null, vColWidth, null, null, null);
-                vTmpDiv_1 = draw_utils_1.newNode(vTmpCell, 'div', null, 'gtaskcelldiv', '\u00A0\u00A0');
-                vTmpDiv_1 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'bardiv_' + vID, 'gtaskbarcontainer', null, 12, vTaskLeftPx_1 + vTaskRightPx - 6);
+                var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, "gtaskcell gtaskcellmile", null, vColWidth, null, null, null);
+                vTmpDiv_1 = draw_utils_1.newNode(vTmpCell, "div", null, "gtaskcelldiv", "\u00A0\u00A0");
+                vTmpDiv_1 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "bardiv_" + vID, "gtaskbarcontainer", null, 12, vTaskLeftPx_1 + vTaskRightPx - 6);
                 this.vTaskList[i].setBarDiv(vTmpDiv_1);
-                var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'taskbar_' + vID, this.vTaskList[i].getClass(), null, 12);
+                var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "taskbar_" + vID, this.vTaskList[i].getClass(), null, 12);
                 this.vTaskList[i].setTaskDiv(vTmpDiv2);
                 if (this.vTaskList[i].getCompVal() < 100)
-                    vTmpDiv2.appendChild(document.createTextNode('\u25CA'));
+                    vTmpDiv2.appendChild(document.createTextNode("\u25CA"));
                 else {
-                    vTmpDiv2 = draw_utils_1.newNode(vTmpDiv2, 'div', null, 'gmilediamond');
-                    draw_utils_1.newNode(vTmpDiv2, 'div', null, 'gmdtop');
-                    draw_utils_1.newNode(vTmpDiv2, 'div', null, 'gmdbottom');
+                    vTmpDiv2 = draw_utils_1.newNode(vTmpDiv2, "div", null, "gmilediamond");
+                    draw_utils_1.newNode(vTmpDiv2, "div", null, "gmdtop");
+                    draw_utils_1.newNode(vTmpDiv2, "div", null, "gmdbottom");
                 }
-                vCaptClass = 'gmilecaption';
+                vCaptClass = "gmilecaption";
                 if (!vSingleCell && !vComb) {
                     this.drawColsChart(vNumCols, vTmpRow, taskCellWidth, vMinDate, vMaxDate);
                 }
@@ -524,31 +519,31 @@ exports.GanttChart = function (pDiv, pFormat) {
                 // Draw Group Bar which has outer div with inner group div
                 // and several small divs to left and right to create angled-end indicators
                 if (this.vTaskList[i].getGroup()) {
-                    vTaskWidth = (vTaskWidth > this.vMinGpLen && vTaskWidth < this.vMinGpLen * 2) ? this.vMinGpLen * 2 : vTaskWidth; // Expand to show two end points
-                    vTaskWidth = (vTaskWidth < this.vMinGpLen) ? this.vMinGpLen : vTaskWidth; // expand to show one end point
-                    var vTmpRow = draw_utils_1.newNode(vTmpTBody, 'tr', this.vDivId + 'childrow_' + vID, ((this.vTaskList[i].getGroup() == 2) ? 'glineitem gitem' : 'ggroupitem ggroup') + this.vFormat, null, null, null, ((this.vTaskList[i].getVisible() == 0) ? 'none' : null));
+                    vTaskWidth = vTaskWidth > this.vMinGpLen && vTaskWidth < this.vMinGpLen * 2 ? this.vMinGpLen * 2 : vTaskWidth; // Expand to show two end points
+                    vTaskWidth = vTaskWidth < this.vMinGpLen ? this.vMinGpLen : vTaskWidth; // expand to show one end point
+                    var vTmpRow = draw_utils_1.newNode(vTmpTBody, "tr", this.vDivId + "childrow_" + vID, (this.vTaskList[i].getGroup() == 2 ? "glineitem gitem" : "ggroupitem ggroup") + this.vFormat, null, null, null, this.vTaskList[i].getVisible() == 0 ? "none" : null);
                     this.vTaskList[i].setChildRow(vTmpRow);
                     events_1.addThisRowListeners(this, this.vTaskList[i].getListChildRow(), vTmpRow);
-                    var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, 'gtaskcell gtaskcellbar', null, vColWidth, null, null);
-                    vTmpDiv_1 = draw_utils_1.newNode(vTmpCell, 'div', null, 'gtaskcelldiv', '\u00A0\u00A0');
+                    var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, "gtaskcell gtaskcellbar", null, vColWidth, null, null);
+                    vTmpDiv_1 = draw_utils_1.newNode(vTmpCell, "div", null, "gtaskcelldiv", "\u00A0\u00A0");
                     this.vTaskList[i].setCellDiv(vTmpDiv_1);
                     if (this.vTaskList[i].getGroup() == 1) {
-                        vTmpDiv_1 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'bardiv_' + vID, 'gtaskbarcontainer', null, vTaskWidth, vTaskLeftPx_1);
+                        vTmpDiv_1 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "bardiv_" + vID, "gtaskbarcontainer", null, vTaskWidth, vTaskLeftPx_1);
                         this.vTaskList[i].setBarDiv(vTmpDiv_1);
-                        var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'taskbar_' + vID, this.vTaskList[i].getClass(), null, vTaskWidth);
+                        var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "taskbar_" + vID, this.vTaskList[i].getClass(), null, vTaskWidth);
                         this.vTaskList[i].setTaskDiv(vTmpDiv2);
-                        draw_utils_1.newNode(vTmpDiv2, 'div', this.vDivId + 'complete_' + vID, this.vTaskList[i].getClass() + 'complete', null, this.vTaskList[i].getCompStr());
-                        draw_utils_1.newNode(vTmpDiv_1, 'div', null, this.vTaskList[i].getClass() + 'endpointleft');
+                        draw_utils_1.newNode(vTmpDiv2, "div", this.vDivId + "complete_" + vID, this.vTaskList[i].getClass() + "complete", null, this.vTaskList[i].getCompStr());
+                        draw_utils_1.newNode(vTmpDiv_1, "div", null, this.vTaskList[i].getClass() + "endpointleft");
                         if (vTaskWidth >= this.vMinGpLen * 2)
-                            draw_utils_1.newNode(vTmpDiv_1, 'div', null, this.vTaskList[i].getClass() + 'endpointright');
-                        vCaptClass = 'ggroupcaption';
+                            draw_utils_1.newNode(vTmpDiv_1, "div", null, this.vTaskList[i].getClass() + "endpointright");
+                        vCaptClass = "ggroupcaption";
                     }
                     if (!vSingleCell && !vComb) {
                         this.drawColsChart(vNumCols, vTmpRow, taskCellWidth, vMinDate, vMaxDate);
                     }
                 }
                 else {
-                    vTaskWidth = (vTaskWidth <= 0) ? 1 : vTaskWidth;
+                    vTaskWidth = vTaskWidth <= 0 ? 1 : vTaskWidth;
                     /**
                      * DRAW THE BOXES FOR GANTT
                      */
@@ -558,40 +553,44 @@ exports.GanttChart = function (pDiv, pFormat) {
                     }
                     else {
                         // Draw Task Bar which has colored bar div
-                        vTmpRow = draw_utils_1.newNode(vTmpTBody, 'tr', this.vDivId + 'childrow_' + vID, 'glineitem gitem' + this.vFormat, null, null, null, ((this.vTaskList[i].getVisible() == 0) ? 'none' : null));
+                        var differentDatesHighlight = "";
+                        if (this.vTaskList[i].getEnd() && this.vTaskList[i].getPlanEnd() && this.vTaskList[i].getStart() && this.vTaskList[i].getPlanStart())
+                            if (Date.parse(this.vTaskList[i].getEnd()) !== Date.parse(this.vTaskList[i].getPlanEnd()) || Date.parse(this.vTaskList[i].getStart()) !== Date.parse(this.vTaskList[i].getPlanStart()))
+                                differentDatesHighlight = "gitemdifferent ";
+                        vTmpRow = draw_utils_1.newNode(vTmpTBody, "tr", this.vDivId + "childrow_" + vID, "glineitem " + differentDatesHighlight + "gitem" + this.vFormat, null, null, null, this.vTaskList[i].getVisible() == 0 ? "none" : null);
                         this.vTaskList[i].setChildRow(vTmpRow);
                         events_1.addThisRowListeners(this, this.vTaskList[i].getListChildRow(), vTmpRow);
-                        var vTmpCell = draw_utils_1.newNode(vTmpRow, 'td', null, 'gtaskcell gtaskcellcolorbar', null, taskCellWidth, null, null);
-                        vTmpDivCell = vTmpDiv_1 = draw_utils_1.newNode(vTmpCell, 'div', null, 'gtaskcelldiv', '\u00A0\u00A0');
+                        var vTmpCell = draw_utils_1.newNode(vTmpRow, "td", null, "gtaskcell gtaskcellcolorbar", null, taskCellWidth, null, null);
+                        vTmpDivCell = vTmpDiv_1 = draw_utils_1.newNode(vTmpCell, "div", null, "gtaskcelldiv", "\u00A0\u00A0");
                     }
                     // DRAW TASK BAR
-                    vTmpDiv_1 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'bardiv_' + vID, 'gtaskbarcontainer', null, vTaskWidth, vTaskLeftPx_1);
+                    vTmpDiv_1 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "bardiv_" + vID, "gtaskbarcontainer", null, vTaskWidth, vTaskLeftPx_1);
                     this.vTaskList[i].setBarDiv(vTmpDiv_1);
                     var vTmpDiv2 = void 0;
                     if (this.vTaskList[i].getStartVar()) {
                         // textbar
-                        vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'taskbar_' + vID, this.vTaskList[i].getClass(), null, vTaskWidth);
+                        vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "taskbar_" + vID, this.vTaskList[i].getClass(), null, vTaskWidth);
                         if (this.vTaskList[i].getBarText()) {
-                            draw_utils_1.newNode(vTmpDiv2, 'span', this.vDivId + 'tasktextbar_' + vID, 'textbar', this.vTaskList[i].getBarText(), this.vTaskList[i].getCompRestStr());
+                            draw_utils_1.newNode(vTmpDiv2, "span", this.vDivId + "tasktextbar_" + vID, "textbar", this.vTaskList[i].getBarText(), this.vTaskList[i].getCompRestStr());
                         }
                         this.vTaskList[i].setTaskDiv(vTmpDiv2);
                     }
                     // PLANNED
                     // If exist and one of them are different, show plan bar... show if there is no real vStart as well (just plan dates)
-                    if (vTaskPlanLeftPx && ((vTaskPlanLeftPx != vTaskLeftPx_1 || vTaskPlanRightPx != vTaskRightPx) || !this.vTaskList[i].getStartVar())) {
-                        var vTmpPlanDiv = draw_utils_1.newNode(vTmpDivCell, 'div', this.vDivId + 'bardiv_' + vID, 'gtaskbarcontainer gplan', null, vTaskPlanRightPx, vTaskPlanLeftPx);
-                        var vTmpPlanDiv2 = draw_utils_1.newNode(vTmpPlanDiv, 'div', this.vDivId + 'taskbar_' + vID, this.vTaskList[i].getClass() + ' gplan', null, vTaskPlanRightPx);
+                    if (vTaskPlanLeftPx && (vTaskPlanLeftPx != vTaskLeftPx_1 || vTaskPlanRightPx != vTaskRightPx || !this.vTaskList[i].getStartVar())) {
+                        var vTmpPlanDiv = draw_utils_1.newNode(vTmpDivCell, "div", this.vDivId + "bardiv_" + vID, "gtaskbarcontainer gplan", null, vTaskPlanRightPx, vTaskPlanLeftPx);
+                        var vTmpPlanDiv2 = draw_utils_1.newNode(vTmpPlanDiv, "div", this.vDivId + "taskbar_" + vID, this.vTaskList[i].getPlanClass() + " gplan", null, vTaskPlanRightPx);
                         this.vTaskList[i].setPlanTaskDiv(vTmpPlanDiv2);
                     }
                     // and opaque completion div
                     if (vTmpDiv2) {
-                        draw_utils_1.newNode(vTmpDiv2, 'div', this.vDivId + 'complete_' + vID, this.vTaskList[i].getClass() + 'complete', null, this.vTaskList[i].getCompStr());
+                        draw_utils_1.newNode(vTmpDiv2, "div", this.vDivId + "complete_" + vID, this.vTaskList[i].getClass() + "complete", null, this.vTaskList[i].getCompStr());
                     }
                     // caption
                     if (vComb)
                         vTmpItem = this.vTaskList[i].getParItem();
                     if (!vComb || (vComb && this.vTaskList[i].getParItem().getEnd() == this.vTaskList[i].getEnd()))
-                        vCaptClass = 'gcaption';
+                        vCaptClass = "gcaption";
                     // Background cells
                     if (!vSingleCell && !vComb && vTmpRow) {
                         this.drawColsChart(vNumCols, vTmpRow, taskCellWidth, vMinDate, vMaxDate);
@@ -601,31 +600,31 @@ exports.GanttChart = function (pDiv, pFormat) {
             if (this.getCaptionType() && vCaptClass !== null) {
                 var vCaptionStr = void 0;
                 switch (this.getCaptionType()) {
-                    case 'Caption':
+                    case "Caption":
                         vCaptionStr = vTmpItem.getCaption();
                         break;
-                    case 'Resource':
+                    case "Resource":
                         vCaptionStr = vTmpItem.getResource();
                         break;
-                    case 'Duration':
+                    case "Duration":
                         vCaptionStr = vTmpItem.getDuration(this.vFormat, this.vLangs[this.vLang]);
                         break;
-                    case 'Complete':
+                    case "Complete":
                         vCaptionStr = vTmpItem.getCompStr();
                         break;
                 }
-                draw_utils_1.newNode(vTmpDiv_1, 'div', null, vCaptClass, vCaptionStr, 120, (vCaptClass == 'gmilecaption') ? 12 : 0);
+                draw_utils_1.newNode(vTmpDiv_1, "div", null, vCaptClass, vCaptionStr, 120, vCaptClass == "gmilecaption" ? 12 : 0);
             }
             // Add Task Info div for tooltip
             if (this.vTaskList[i].getTaskDiv() && vTmpDiv_1) {
-                var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'tt' + vID, null, null, null, null, 'none');
+                var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "tt" + vID, null, null, null, null, "none");
                 var _a = this.createTaskInfo(this.vTaskList[i], this.vTooltipTemplate), component = _a.component, callback = _a.callback;
                 vTmpDiv2.appendChild(component);
                 events_1.addTooltipListeners(this, this.vTaskList[i].getTaskDiv(), vTmpDiv2, callback);
             }
             // Add Plan Task Info div for tooltip
             if (this.vTaskList[i].getPlanTaskDiv() && vTmpDiv_1) {
-                var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, 'div', this.vDivId + 'tt' + vID, null, null, null, null, 'none');
+                var vTmpDiv2 = draw_utils_1.newNode(vTmpDiv_1, "div", this.vDivId + "tt" + vID, null, null, null, null, "none");
                 var _b = this.createTaskInfo(this.vTaskList[i], this.vTooltipTemplate), component = _b.component, callback = _b.callback;
                 vTmpDiv2.appendChild(component);
                 events_1.addTooltipListeners(this, this.vTaskList[i].getPlanTaskDiv(), vTmpDiv2, callback);
@@ -633,10 +632,10 @@ exports.GanttChart = function (pDiv, pFormat) {
         }
         // Include the footer with the days/week/month...
         if (vSingleCell) {
-            var vTmpTFootTRow = draw_utils_1.newNode(vTmpTFoot, 'tr');
-            var vTmpTFootTCell = draw_utils_1.newNode(vTmpTFootTRow, 'td', null, null, null, '100%');
-            var vTmpTFootTCellTable = draw_utils_1.newNode(vTmpTFootTCell, 'table', null, 'gcharttableh', null, '100%');
-            var vTmpTFootTCellTableTBody = draw_utils_1.newNode(vTmpTFootTCellTable, 'tbody');
+            var vTmpTFootTRow = draw_utils_1.newNode(vTmpTFoot, "tr");
+            var vTmpTFootTCell = draw_utils_1.newNode(vTmpTFootTRow, "td", null, null, null, "100%");
+            var vTmpTFootTCellTable = draw_utils_1.newNode(vTmpTFootTCell, "table", null, "gcharttableh", null, "100%");
+            var vTmpTFootTCellTableTBody = draw_utils_1.newNode(vTmpTFootTCellTable, "tbody");
             vTmpTFootTCellTableTBody.appendChild(vDateRow.cloneNode(true));
         }
         else {
@@ -649,28 +648,28 @@ exports.GanttChart = function (pDiv, pFormat) {
         if (pEndDate === void 0) { pEndDate = null; }
         var columnCurrentDay = null;
         // Find the Current day cell to put a different class
-        if (this.vShowWeekends !== false && pStartDate && pEndDate && (this.vFormat == 'day' || this.vFormat == 'week')) {
+        if (this.vShowWeekends !== false && pStartDate && pEndDate && (this.vFormat == "day" || this.vFormat == "week")) {
             var curTaskStart = new Date(pStartDate.getTime());
             var curTaskEnd = new Date();
             var onePeriod = 3600000;
-            if (this.vFormat == 'day') {
+            if (this.vFormat == "day") {
                 onePeriod *= 24;
             }
-            else if (this.vFormat == 'week') {
+            else if (this.vFormat == "week") {
                 onePeriod *= 24 * 7;
             }
             columnCurrentDay = Math.floor(general_utils_1.calculateCurrentDateOffset(curTaskStart, curTaskEnd) / onePeriod) - 1;
         }
         for (var j = 0; j < vNumCols - 1; j++) {
-            var vCellFormat = 'gtaskcell gtaskcellcols';
-            if (this.vShowWeekends !== false && this.vFormat == 'day' && ((j % 7 == 4) || (j % 7 == 5))) {
-                vCellFormat = 'gtaskcellwkend';
+            var vCellFormat = "gtaskcell gtaskcellcols";
+            if (this.vShowWeekends !== false && this.vFormat == "day" && (j % 7 == 4 || j % 7 == 5)) {
+                vCellFormat = "gtaskcellwkend";
             }
             //When is the column is the current day/week,give a different class
-            else if ((this.vFormat == 'week' || this.vFormat == 'day') && j === columnCurrentDay) {
-                vCellFormat = 'gtaskcellcurrent';
+            else if ((this.vFormat == "week" || this.vFormat == "day") && j === columnCurrentDay) {
+                vCellFormat = "gtaskcellcurrent";
             }
-            draw_utils_1.newNode(vTmpRow, 'td', null, vCellFormat, '\u00A0\u00A0', taskCellWidth);
+            draw_utils_1.newNode(vTmpRow, "td", null, vCellFormat, "\u00A0\u00A0", taskCellWidth);
         }
     };
     /**
@@ -690,7 +689,7 @@ exports.GanttChart = function (pDiv, pFormat) {
         }
         if (this.vDebug) {
             bd = new Date();
-            console.info('before draw', bd);
+            console.info("before draw", bd);
         }
         // Process all tasks, reset parent date and completion % if task list has altered
         if (this.vProcessNeeded)
@@ -700,25 +699,25 @@ exports.GanttChart = function (pDiv, pFormat) {
         vMinDate = date_utils_1.getMinDate(this.vTaskList, this.vFormat, this.getMinDate() && date_utils_1.coerceDate(this.getMinDate()));
         vMaxDate = date_utils_1.getMaxDate(this.vTaskList, this.vFormat, this.getMaxDate() && date_utils_1.coerceDate(this.getMaxDate()));
         // Calculate chart width variables.
-        if (this.vFormat == 'day')
+        if (this.vFormat == "day")
             vColWidth = this.vDayColWidth;
-        else if (this.vFormat == 'week')
+        else if (this.vFormat == "week")
             vColWidth = this.vWeekColWidth;
-        else if (this.vFormat == 'month')
+        else if (this.vFormat == "month")
             vColWidth = this.vMonthColWidth;
-        else if (this.vFormat == 'quarter')
+        else if (this.vFormat == "quarter")
             vColWidth = this.vQuarterColWidth;
-        else if (this.vFormat == 'hour')
+        else if (this.vFormat == "hour")
             vColWidth = this.vHourColWidth;
         // DRAW the Left-side of the chart (names, resources, comp%)
         var vLeftHeader = document.createDocumentFragment();
         /**
          * LIST HEAD
-        */
+         */
         var gListLbl = this.drawListHead(vLeftHeader);
         /**
          * LIST BODY
-        */
+         */
         var _a = this.drawListBody(vLeftHeader), vNumRows = _a.vNumRows, vTmpContentTabWrapper = _a.vTmpContentTabWrapper;
         /**
          * CHART HEAD
@@ -730,28 +729,28 @@ exports.GanttChart = function (pDiv, pFormat) {
         var vRightTable = this.drawCharBody(vTaskLeftPx, vTmpContentTabWrapper, gChartLbl, gListLbl, vMinDate, vMaxDate, vSingleCell, vNumCols, vColWidth, vDateRow).vRightTable;
         if (this.vDebug) {
             var ad = new Date();
-            console.info('after tasks loop', ad, (ad.getTime() - bd.getTime()));
+            console.info("after tasks loop", ad, ad.getTime() - bd.getTime());
         }
         // MAIN VIEW: Appending all generated components to main view
         while (this.vDiv.hasChildNodes())
             this.vDiv.removeChild(this.vDiv.firstChild);
-        var vTmpDiv = draw_utils_1.newNode(this.vDiv, 'div', null, 'gchartcontainer');
+        var vTmpDiv = draw_utils_1.newNode(this.vDiv, "div", null, "gchartcontainer");
         vTmpDiv.style.height = this.vTotalHeight;
-        var leftvTmpDiv = draw_utils_1.newNode(vTmpDiv, 'div', null, 'gmain gmainleft');
+        var leftvTmpDiv = draw_utils_1.newNode(vTmpDiv, "div", null, "gmain gmainleft");
         leftvTmpDiv.appendChild(vLeftHeader);
         // leftvTmpDiv.appendChild(vLeftTable);
-        var rightvTmpDiv = draw_utils_1.newNode(vTmpDiv, 'div', null, 'gmain gmainright');
+        var rightvTmpDiv = draw_utils_1.newNode(vTmpDiv, "div", null, "gmain gmainright");
         rightvTmpDiv.appendChild(vRightHeader);
         rightvTmpDiv.appendChild(vRightTable);
         vTmpDiv.appendChild(leftvTmpDiv);
         vTmpDiv.appendChild(rightvTmpDiv);
-        draw_utils_1.newNode(vTmpDiv, 'div', null, 'ggridfooter');
-        var vTmpDiv2 = draw_utils_1.newNode(this.getChartBody(), 'div', this.vDivId + 'Lines', 'glinediv');
-        if (this.vEvents.onLineContainerHover && typeof this.vEvents.onLineContainerHover === 'function') {
-            events_1.addListener('mouseover', this.vEvents.onLineContainerHover, vTmpDiv2);
-            events_1.addListener('mouseout', this.vEvents.onLineContainerHover, vTmpDiv2);
+        draw_utils_1.newNode(vTmpDiv, "div", null, "ggridfooter");
+        var vTmpDiv2 = draw_utils_1.newNode(this.getChartBody(), "div", this.vDivId + "Lines", "glinediv");
+        if (this.vEvents.onLineContainerHover && typeof this.vEvents.onLineContainerHover === "function") {
+            events_1.addListener("mouseover", this.vEvents.onLineContainerHover, vTmpDiv2);
+            events_1.addListener("mouseout", this.vEvents.onLineContainerHover, vTmpDiv2);
         }
-        vTmpDiv2.style.visibility = 'hidden';
+        vTmpDiv2.style.visibility = "hidden";
         this.setLines(vTmpDiv2);
         /* Quick hack to show the generated HTML on older browsers
               let tmpGenSrc=document.createElement('textarea');
@@ -761,14 +760,14 @@ exports.GanttChart = function (pDiv, pFormat) {
         // LISTENERS: Now all the content exists, register scroll listeners
         events_1.addScrollListeners(this);
         // SCROLL: now check if we are actually scrolling the pane
-        if (this.vScrollTo != '') {
+        if (this.vScrollTo != "") {
             var vScrollDate = new Date(vMinDate.getTime());
             var vScrollPx = 0;
-            if (this.vScrollTo.substr && this.vScrollTo.substr(0, 2) == 'px') {
+            if (this.vScrollTo.substr && this.vScrollTo.substr(0, 2) == "px") {
                 vScrollPx = parseInt(this.vScrollTo.substr(2));
             }
             else {
-                if (this.vScrollTo === 'today') {
+                if (this.vScrollTo === "today") {
                     vScrollDate = new Date();
                 }
                 else if (this.vScrollTo instanceof Date) {
@@ -777,7 +776,7 @@ exports.GanttChart = function (pDiv, pFormat) {
                 else {
                     vScrollDate = date_utils_1.parseDateStr(this.vScrollTo, this.getDateInputFormat());
                 }
-                if (this.vFormat == 'hour')
+                if (this.vFormat == "hour")
                     vScrollDate.setMinutes(0, 0, 0);
                 else
                     vScrollDate.setHours(0, 0, 0, 0);
@@ -785,7 +784,7 @@ exports.GanttChart = function (pDiv, pFormat) {
             }
             this.getChartBody().scrollLeft = vScrollPx;
         }
-        if (vMinDate.getTime() <= (new Date()).getTime() && vMaxDate.getTime() >= (new Date()).getTime()) {
+        if (vMinDate.getTime() <= new Date().getTime() && vMaxDate.getTime() >= new Date().getTime()) {
             this.vTodayPx = general_utils_1.getOffset(vMinDate, new Date(), vColWidth, this.vFormat, this.vShowWeekends);
         }
         else
@@ -794,20 +793,20 @@ exports.GanttChart = function (pDiv, pFormat) {
         var bdd;
         if (this.vDebug) {
             bdd = new Date();
-            console.info('before DrawDependencies', bdd);
+            console.info("before DrawDependencies", bdd);
         }
-        if (this.vEvents && typeof this.vEvents.beforeLineDraw === 'function') {
+        if (this.vEvents && typeof this.vEvents.beforeLineDraw === "function") {
             this.vEvents.beforeLineDraw();
         }
         this.DrawDependencies(this.vDebug);
         events_1.addListenerDependencies(this.vLineOptions);
         // EVENTS
-        if (this.vEvents && typeof this.vEvents.afterLineDraw === 'function') {
+        if (this.vEvents && typeof this.vEvents.afterLineDraw === "function") {
             this.vEvents.afterLineDraw();
         }
         if (this.vDebug) {
             var ad = new Date();
-            console.info('after DrawDependencies', ad, (ad.getTime() - bdd.getTime()));
+            console.info("after DrawDependencies", ad, ad.getTime() - bdd.getTime());
         }
         this.drawComplete(vMinDate, vColWidth, bd);
     };
@@ -817,7 +816,7 @@ exports.GanttChart = function (pDiv, pFormat) {
     this.drawComplete = function (vMinDate, vColWidth, bd) {
         if (this.vDebug) {
             var ad = new Date();
-            console.info('after draw', ad, (ad.getTime() - bd.getTime()));
+            console.info("after draw", ad, ad.getTime() - bd.getTime());
         }
         events_1.updateGridHeaderWidth(this);
         this.chartRowDateToX = function (date) {
@@ -827,7 +826,7 @@ exports.GanttChart = function (pDiv, pFormat) {
             this.vEvents.afterDraw();
         }
     };
-    if (this.vDiv && this.vDiv.nodeName && this.vDiv.nodeName.toLowerCase() == 'div')
+    if (this.vDiv && this.vDiv.nodeName && this.vDiv.nodeName.toLowerCase() == "div")
         this.vDivId = this.vDiv.id;
 }; //GanttChart
 //# sourceMappingURL=draw.js.map