gantt-task-react-powern 0.6.21 → 0.6.23

package/dist/index.modern.js

@@ -105,9 +105,23 @@ var startOfDate = function startOfDate(date, scale) {
   var newDate = new Date(date.getFullYear(), shouldReset("year") ? 0 : date.getMonth(), shouldReset("month") ? 1 : date.getDate(), shouldReset("day") ? 0 : date.getHours(), shouldReset("hour") ? 0 : date.getMinutes(), shouldReset("minute") ? 0 : date.getSeconds(), shouldReset("second") ? 0 : date.getMilliseconds());
   return newDate;
 };
-var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount) {
+
+var getFiscalQuarterStartDate = function getFiscalQuarterStartDate(date, quarterStart) {
+  var month = date.getMonth();
+  var offset = (month - quarterStart + 12) % 12;
+  var qStartMonth = (quarterStart + Math.floor(offset / 3) * 3) % 12;
+  var year = date.getFullYear();
+  if (qStartMonth > month) year -= 1;
+  return new Date(year, qStartMonth, 1);
+};
+
+var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount, quarterStart) {
   var _tasks$, _tasks$2, _tasks$3, _tasks$4;
 
+  if (quarterStart === void 0) {
+    quarterStart = 0;
+  }
+
   var newStartDate = ((_tasks$ = tasks[0]) === null || _tasks$ === void 0 ? void 0 : _tasks$.start.getTime()) !== 0 ? ((_tasks$2 = tasks[0]) === null || _tasks$2 === void 0 ? void 0 : _tasks$2.start) || new Date() : new Date();
   var newEndDate = ((_tasks$3 = tasks[0]) === null || _tasks$3 === void 0 ? void 0 : _tasks$3.end.getTime()) !== 0 ? ((_tasks$4 = tasks[0]) === null || _tasks$4 === void 0 ? void 0 : _tasks$4.end) || new Date() : new Date();
 
@@ -140,11 +154,14 @@ var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount) {
       break;
 
     case ViewMode.Quarter:
-      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "year");
-      newStartDate = startOfDate(newStartDate, "year");
-      newEndDate = addToDate(newEndDate, 1, "year");
-      newEndDate = startOfDate(newEndDate, "quarter");
-      break;
+      {
+        newStartDate = addToDate(newStartDate, -1 * preStepsCount, "year");
+        newStartDate = getFiscalQuarterStartDate(newStartDate, quarterStart);
+        newEndDate = addToDate(newEndDate, 1, "year");
+        var endQStart = getFiscalQuarterStartDate(newEndDate, quarterStart);
+        newEndDate = endQStart < newEndDate ? addToDate(endQStart, 3, "month") : endQStart;
+        break;
+      }
 
     case ViewMode.Month:
       newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
@@ -235,13 +252,6 @@ var seedDates = function seedDates(startDate, endDate, viewMode) {
 
   return dates;
 };
-var getLocaleMonth = function getLocaleMonth(date, locale) {
-  var bottomValue = getCachedDateTimeFormat(locale, {
-    month: "long"
-  }).format(date);
-  bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
-  return bottomValue;
-};
 var getLocalDayOfWeek = function getLocalDayOfWeek(date, locale, format) {
   var bottomValue = getCachedDateTimeFormat(locale, {
     weekday: format
@@ -256,26 +266,6 @@ var getMonday = function getMonday(date) {
   return new Date(date.setDate(diff));
 };
 
-var getWeekNumberISO8601 = function getWeekNumberISO8601(date) {
-  var tmpDate = new Date(date.valueOf());
-  var dayNumber = (tmpDate.getDay() + 6) % 7;
-  tmpDate.setDate(tmpDate.getDate() - dayNumber + 3);
-  var firstThursday = tmpDate.valueOf();
-  tmpDate.setMonth(0, 1);
-
-  if (tmpDate.getDay() !== 4) {
-    tmpDate.setMonth(0, 1 + (4 - tmpDate.getDay() + 7) % 7);
-  }
-
-  var weekNumber = (1 + Math.ceil((firstThursday - tmpDate.valueOf()) / 604800000)).toString();
-
-  if (weekNumber.length === 1) {
-    return "0" + weekNumber;
-  } else {
-    return weekNumber;
-  }
-};
-
 var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
 
 var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
@@ -731,7 +721,8 @@ var Tooltip = function Tooltip(_ref) {
       fontFamily = _ref.fontFamily,
       headerHeight = _ref.headerHeight,
       taskListWidth = _ref.taskListWidth,
-      TooltipContent = _ref.TooltipContent;
+      TooltipContent = _ref.TooltipContent,
+      isDragging = _ref.isDragging;
   var tooltipRef = useRef(null);
 
   var _useState = useState(0),
@@ -749,6 +740,14 @@ var Tooltip = function Tooltip(_ref) {
       var newRelatedY = task.index * rowHeight - scrollY + headerHeight;
       var newRelatedX;
 
+      if (isDragging) {
+        newRelatedX = taskListWidth + svgContainerWidth - tooltipWidth - 10;
+        newRelatedY = headerHeight + 5;
+        setRelatedY(newRelatedY);
+        setRelatedX(newRelatedX);
+        return;
+      }
+
       if (rtl) {
         newRelatedX = task.x1 - arrowIndent * 1.5 - tooltipWidth - scrollX;
 
@@ -788,7 +787,7 @@ var Tooltip = function Tooltip(_ref) {
       setRelatedY(newRelatedY);
       setRelatedX(newRelatedX);
     }
-  }, [tooltipRef, task, arrowIndent, scrollX, scrollY, headerHeight, taskListWidth, rowHeight, svgContainerHeight, svgContainerWidth, rtl]);
+  }, [tooltipRef, task, arrowIndent, scrollX, scrollY, headerHeight, taskListWidth, rowHeight, svgContainerHeight, svgContainerWidth, rtl, isDragging]);
   return React.createElement("div", {
     ref: tooltipRef,
     className: relatedX ? styles$2.tooltipDetailsContainer : styles$2.tooltipDetailsContainerHidden,
@@ -804,6 +803,8 @@ var Tooltip = function Tooltip(_ref) {
   }));
 };
 var StandardTooltipContent = function StandardTooltipContent(_ref2) {
+  var _task$plannedDuration, _task$actualDuration;
+
   var task = _ref2.task,
       fontSize = _ref2.fontSize,
       fontFamily = _ref2.fontFamily,
@@ -812,6 +813,8 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     fontSize: fontSize,
     fontFamily: fontFamily
   };
+  var computedPlannedDuration = task.start && task.end && task.end.getTime() - task.start.getTime() > 0 ? Math.max(1, Math.round((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24))) : (_task$plannedDuration = task.plannedDuration) != null ? _task$plannedDuration : 0;
+  var computedActualDuration = task.actualStart && task.actualEnd && task.actualEnd.getTime() - task.actualStart.getTime() > 0 ? Math.max(1, Math.round((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24))) : (_task$actualDuration = task.actualDuration) != null ? _task$actualDuration : 0;
   if (type == "planned") return React.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
     style: style
@@ -821,7 +824,7 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     }
   }, task.name + ": Planned dates: "), React.createElement("b", null, task.start.getMonth() + 1 + "/" + task.start.getDate() + "/" + task.start.getFullYear() + " - " + (task.end.getMonth() + 1) + "/" + task.end.getDate() + "/" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, "Duration: " + task.plannedDuration + " day(s)"), React.createElement("p", {
+  }, "Duration: " + computedPlannedDuration + " day(s)"), React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
   }, !!task.progress && "Progress: " + task.progress + " %"));else return React.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
@@ -832,7 +835,7 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     }
   }, task.name + ": Actual dates: "), React.createElement("b", null, task.actualStart.getMonth() + 1 + "/" + task.actualStart.getDate() + "/" + task.actualStart.getFullYear() + " - " + (task.actualEnd.getMonth() + 1) + "/" + task.actualEnd.getDate() + "/" + task.actualEnd.getFullYear()), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, "Duration: " + task.actualDuration + " day(s)"), React.createElement("p", {
+  }, "Duration: " + computedActualDuration + " day(s)"), React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
   }, !!task.progress && "Progress: " + task.progress + " %"));
 };
@@ -1099,9 +1102,133 @@ var TaskList = function TaskList(_ref) {
   }, React.createElement(TaskListTable, Object.assign({}, tableProps))))));
 };
 
-var styles$5 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
+function parseTimeToMinutes(t) {
+  var parts = t.split(":").map(Number);
+  return parts[0] * 60 + parts[1] + (parts[2] ? parts[2] / 60 : 0);
+}
+
+function toDateString(date) {
+  var y = date.getFullYear();
+  var m = String(date.getMonth() + 1).padStart(2, "0");
+  var d = String(date.getDate()).padStart(2, "0");
+  return y + "-" + m + "-" + d;
+}
+
+function isHoliday(date, cal) {
+  return cal.holidays.includes(toDateString(date));
+}
+function isOffDay(date, cal) {
+  return cal.off_days.includes(date.getDay()) || isHoliday(date, cal);
+}
+function getShiftsForDay(date, cal) {
+  if (isOffDay(date, cal)) return [];
+  return cal.shifts.map(function (_ref) {
+    var s = _ref[0],
+        e = _ref[1];
+    return {
+      start: parseTimeToMinutes(s),
+      end: parseTimeToMinutes(e)
+    };
+  });
+}
+function getWorkingIntervals(start, end, cal) {
+  if (start >= end) return [];
+  var intervals = [];
+  var cursor = new Date(start);
+  cursor.setHours(0, 0, 0, 0);
+
+  while (cursor <= end) {
+    var shifts = getShiftsForDay(cursor, cal);
+
+    for (var _iterator = _createForOfIteratorHelperLoose(shifts), _step; !(_step = _iterator()).done;) {
+      var shift = _step.value;
+      var shiftStart = new Date(cursor);
+      shiftStart.setHours(Math.floor(shift.start / 60), Math.floor(shift.start % 60), Math.round(shift.start % 1 * 60), 0);
+      var shiftEnd = new Date(cursor);
+      shiftEnd.setHours(Math.floor(shift.end / 60), Math.floor(shift.end % 60), Math.round(shift.end % 1 * 60), 0);
+      var intervalStart = shiftStart < start ? start : shiftStart;
+      var intervalEnd = shiftEnd > end ? end : shiftEnd;
+
+      if (intervalStart < intervalEnd) {
+        intervals.push({
+          start: intervalStart,
+          end: intervalEnd
+        });
+      }
+    }
+
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  return intervals;
+}
+function snapToWorkingTime(date, cal, direction) {
+  var MAX_DAYS = 60;
+  var result = new Date(date);
+
+  for (var attempt = 0; attempt < MAX_DAYS * 24 * 60; attempt++) {
+    var dayStart = new Date(result);
+    dayStart.setHours(0, 0, 0, 0);
+    var shifts = getShiftsForDay(dayStart, cal);
+
+    if (shifts.length > 0) {
+      if (direction === "forward") {
+        var currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
+
+        for (var _iterator2 = _createForOfIteratorHelperLoose(shifts), _step2; !(_step2 = _iterator2()).done;) {
+          var shift = _step2.value;
+
+          if (currentMins <= shift.end) {
+            if (currentMins < shift.start) {
+              result.setHours(Math.floor(shift.start / 60), Math.round(shift.start % 60), 0, 0);
+            }
+
+            return result;
+          }
+        }
+
+        result.setDate(result.getDate() + 1);
+        result.setHours(0, 0, 0, 0);
+      } else {
+        var _currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
+
+        for (var i = shifts.length - 1; i >= 0; i--) {
+          if (_currentMins >= shifts[i].start) {
+            if (_currentMins > shifts[i].end) {
+              result.setHours(Math.floor(shifts[i].end / 60), Math.round(shifts[i].end % 60), 0, 0);
+            }
+
+            return result;
+          }
+        }
+
+        result.setDate(result.getDate() - 1);
+        result.setHours(23, 59, 59, 0);
+      }
+    } else {
+      if (direction === "forward") {
+        result.setDate(result.getDate() + 1);
+        result.setHours(0, 0, 0, 0);
+      } else {
+        result.setDate(result.getDate() - 1);
+        result.setHours(23, 59, 59, 0);
+      }
+    }
+  }
+
+  return date;
+}
+function getQuarterNumber(date, quarterStart) {
+  var month = date.getMonth();
+  var offset = (month - quarterStart + 12) % 12;
+  return Math.floor(offset / 3) + 1;
+}
+
+var styles$5 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","gridTickDashed":"_Zh9jh","darkerGridRow":"_2M-tt"};
 
 var GridBody = function GridBody(_ref) {
+  var _projectCalendar$week;
+
   var tasks = _ref.tasks,
       scheduleType = _ref.scheduleType,
       dates = _ref.dates,
@@ -1114,7 +1241,9 @@ var GridBody = function GridBody(_ref) {
       _ref$virtualItems = _ref.virtualItems,
       virtualItems = _ref$virtualItems === void 0 ? [] : _ref$virtualItems,
       visibleStartY = _ref.visibleStartY,
-      visibleEndY = _ref.visibleEndY;
+      visibleEndY = _ref.visibleEndY,
+      projectCalendar = _ref.projectCalendar,
+      viewMode = _ref.viewMode;
   var visibleHeight = visibleEndY - visibleStartY;
   var now = new Date();
   var items = virtualItems.length > 0 ? virtualItems : tasks.map(function (_, i) {
@@ -1127,7 +1256,8 @@ var GridBody = function GridBody(_ref) {
     };
   });
 
-  var isWeekend = function isWeekend(date) {
+  var isDayOff = function isDayOff(date) {
+    if (projectCalendar) return isOffDay(date, projectCalendar);
     var d = date.getDay();
     return d === 0 || d === 6;
   };
@@ -1147,7 +1277,8 @@ var GridBody = function GridBody(_ref) {
   };
 
   var todayRects = [];
-  var weekendRects = [];
+  var offDayRects = [];
+  var weekStartDay = (_projectCalendar$week = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) != null ? _projectCalendar$week : 1;
 
   for (var i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
     if (isTodayColumn(i)) {
@@ -1161,26 +1292,57 @@ var GridBody = function GridBody(_ref) {
       }));
     }
 
-    if (isWeekend(dates[i])) {
-      weekendRects.push(React.createElement("rect", {
-        key: "weekend-" + i,
-        x: x,
-        y: visibleStartY,
-        width: columnWidth,
-        height: visibleHeight,
-        fill: weekendColor
-      }));
+    if (viewMode !== ViewMode.Month && viewMode !== ViewMode.Quarter) {
+      var _dates;
+
+      var pEnd = (_dates = dates[i + 1]) != null ? _dates : addToDate(dates[i], 1, "day");
+      var periodMs = pEnd.getTime() - dates[i].getTime();
+
+      if (periodMs > 0) {
+        var cursor = new Date(dates[i]);
+        cursor.setHours(0, 0, 0, 0);
+
+        while (cursor.getTime() < pEnd.getTime()) {
+          if (isDayOff(cursor)) {
+            var ds = cursor.getTime() - dates[i].getTime();
+            var de = ds + 86400000;
+            var startFrac = Math.max(0, ds) / periodMs;
+            var endFrac = Math.min(periodMs, de) / periodMs;
+            var rw = (endFrac - startFrac) * columnWidth;
+
+            if (rw > 0.5) {
+              offDayRects.push(React.createElement("rect", {
+                key: "offday-" + i + "-" + cursor.getTime(),
+                x: x + startFrac * columnWidth,
+                y: visibleStartY,
+                width: rw,
+                height: visibleHeight,
+                fill: weekendColor
+              }));
+            }
+          }
+
+          cursor.setDate(cursor.getDate() + 1);
+        }
+      }
     }
   }
 
-  var tickLines = dates.map(function (_, i) {
+  var isDayView = viewMode === ViewMode.Day;
+  var tickLines = dates.map(function (date, i) {
+    var tickClass = styles$5.gridTick;
+
+    if (isDayView) {
+      tickClass = date.getDay() === weekStartDay ? styles$5.gridTick : styles$5.gridTickDashed;
+    }
+
     return React.createElement("line", {
       key: "tick-" + i,
       x1: i * columnWidth,
       y1: visibleStartY,
       x2: i * columnWidth,
       y2: visibleEndY,
-      className: styles$5.gridTick
+      className: tickClass
     });
   });
   var rowBackgrounds = [];
@@ -1226,10 +1388,10 @@ var GridBody = function GridBody(_ref) {
   }, rowBackgrounds), React.createElement("g", {
     className: "rowLines"
   }, rowLines), React.createElement("g", {
+    className: "offdays"
+  }, offDayRects), React.createElement("g", {
     className: "ticks"
-  }, tickLines), scheduleType === "lookAhead" && React.createElement("g", {
-    className: "weekend"
-  }, weekendRects), React.createElement("g", {
+  }, tickLines), React.createElement("g", {
     className: "today"
   }, todayRects));
 };
@@ -1240,7 +1402,7 @@ var Grid = function Grid(props) {
   }, React.createElement(GridBody, Object.assign({}, props)));
 };
 
-var styles$6 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
+var styles$6 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTickSolid":"_2X-yN","calendarTickDashed":"_2BaXZ","calendarOffDayHeader":"_24p-y","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
 
 var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
   var value = _ref.value,
@@ -1277,7 +1439,14 @@ var Calendar = function Calendar(_ref) {
       headerHeight = _ref.headerHeight,
       columnWidth = _ref.columnWidth,
       fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize;
+      fontSize = _ref.fontSize,
+      projectCalendar = _ref.projectCalendar;
+
+  var shortMonth = function shortMonth(date) {
+    return date.toLocaleString(locale, {
+      month: "short"
+    });
+  };
 
   var getCalendarValuesForYear = function getCalendarValuesForYear() {
     var topValues = [];
@@ -1320,93 +1489,150 @@ var Calendar = function Calendar(_ref) {
   };
 
   var getCalendarValuesForQuarter = function getCalendarValuesForQuarter() {
+    var _projectCalendar$quar;
+
     var topValues = [];
     var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
+    var offDayRects = [];
+    var quarterStart = (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0;
+    var rowH = headerHeight / 3;
 
     for (var i = 0; i < dateSetup.dates.length; i++) {
       var date = dateSetup.dates[i];
-      var quarter = Math.floor(date.getMonth() / 3) + 1;
-      var bottomValue = "Q" + quarter;
+      var qNum = getQuarterNumber(date, quarterStart);
+
+      for (var m = 0; m < 3; m++) {
+        var monthDate = addToDate(date, m, "month");
+        bottomValues.push(React.createElement("text", {
+          key: "qmonth-" + i + "-" + m,
+          y: headerHeight * 0.9,
+          x: columnWidth * i + columnWidth * (m * 2 + 1) / 6,
+          className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
+        }, shortMonth(monthDate)));
+      }
+
       bottomValues.push(React.createElement("text", {
-        key: bottomValue + "-" + date.getFullYear(),
-        y: headerHeight * 0.8,
+        key: "qlabel-" + i,
+        y: rowH * 1.6,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$6.calendarBottomText
-      }, bottomValue));
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
+      }, "Qtr " + qNum));
+      bottomValues.push(React.createElement("line", {
+        key: "qsep-" + i,
+        x1: columnWidth * i,
+        y1: rowH,
+        x2: columnWidth * i,
+        y2: headerHeight,
+        className: styles$6.calendarTopTick
+      }));
+
+      if (i === 0) {
+        bottomValues.push(React.createElement("line", {
+          key: "qhsep1",
+          x1: 0,
+          y1: rowH,
+          x2: columnWidth * dateSetup.dates.length,
+          y2: rowH,
+          className: styles$6.calendarTopTick
+        }));
+        bottomValues.push(React.createElement("line", {
+          key: "qhsep2",
+          x1: 0,
+          y1: rowH * 2,
+          x2: columnWidth * dateSetup.dates.length,
+          y2: rowH * 2,
+          className: styles$6.calendarTopTick
+        }));
+      }
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
         var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        var span = 0;
 
-        if (rtl) {
-          xText = (3 + i + quarter) * columnWidth;
-        } else {
-          xText = (3 + i - quarter) * columnWidth;
+        for (var j = i; j < dateSetup.dates.length && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
+          span++;
         }
 
+        var xText = columnWidth * i + columnWidth * span / 2;
         topValues.push(React.createElement(TopPartOfCalendar, {
-          key: topValue,
+          key: topValue + i,
           value: topValue,
           x1Line: columnWidth * i,
           y1Line: 0,
-          y2Line: headerHeight,
+          y2Line: rowH,
           xText: xText,
-          yText: topDefaultHeight * 0.9
+          yText: rowH * 0.7,
+          textAnchor: "middle"
         }));
       }
     }
 
-    return [topValues, bottomValues];
+    return [topValues, bottomValues, offDayRects];
   };
 
   var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
+    var _projectCalendar$quar2;
+
     var topValues = [];
     var bottomValues = [];
+    var offDayRects = [];
     var topDefaultHeight = headerHeight * 0.5;
+    var quarterStart = (_projectCalendar$quar2 = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar2 : 0;
 
     for (var i = 0; i < dateSetup.dates.length; i++) {
       var date = dateSetup.dates[i];
-      var bottomValue = date.toLocaleString(locale, {
-        month: "short"
-      });
+      var bottomValue = shortMonth(date);
       bottomValues.push(React.createElement("text", {
-        key: bottomValue + date.getFullYear(),
+        key: bottomValue + date.getFullYear() + i,
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$6.calendarTopText + " " + styles$6.textAnchorEnd
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
       }, bottomValue));
+      var qNum = getQuarterNumber(date, quarterStart);
+      var prevDate = i > 0 ? dateSetup.dates[i - 1] : null;
+      var prevQNum = prevDate ? getQuarterNumber(prevDate, quarterStart) : -1;
+      var isNewQuarter = i === 0 || qNum !== prevQNum || date.getFullYear() !== (prevDate ? prevDate.getFullYear() : -1);
 
-      if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+      if (isNewQuarter) {
+        var topValue = "Qtr " + qNum + ", " + date.getFullYear();
+        var span = 0;
 
-        if (rtl) {
-          xText = (6 + i + date.getMonth() + 1) * columnWidth;
-        } else {
-          xText = (6 + i - date.getMonth()) * columnWidth;
+        for (var j = i; j < dateSetup.dates.length && getQuarterNumber(dateSetup.dates[j], quarterStart) === qNum && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
+          span++;
         }
 
-        console.log(xText);
+        var xText = rtl ? columnWidth * i + columnWidth * span * 0.5 + columnWidth : columnWidth * i + columnWidth * span / 2;
         topValues.push(React.createElement(TopPartOfCalendar, {
-          key: topValue,
+          key: topValue + i,
           value: topValue,
           x1Line: columnWidth * i,
           y1Line: 0,
           y2Line: topDefaultHeight,
           xText: xText,
-          yText: topDefaultHeight * 0.9,
-          textAnchor: "end"
+          yText: topDefaultHeight * 0.7,
+          textAnchor: "middle"
         }));
+
+        if (i > 0) {
+          bottomValues.push(React.createElement("line", {
+            key: "qbound-" + i,
+            x1: columnWidth * i,
+            y1: topDefaultHeight,
+            x2: columnWidth * i,
+            y2: headerHeight,
+            className: styles$6.calendarTopTick
+          }));
+        }
       }
     }
 
-    return [topValues, bottomValues];
+    return [topValues, bottomValues, offDayRects];
   };
 
   var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
     var topValues = [];
     var bottomValues = [];
+    var offDayRects = [];
     var weeksCount = 1;
     var topDefaultHeight = headerHeight * 0.5;
     var dates = dateSetup.dates;
@@ -1416,10 +1642,10 @@ var Calendar = function Calendar(_ref) {
       var topValue = "";
 
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
-        topValue = getLocaleMonth(date, locale) + ", " + date.getFullYear();
+        topValue = shortMonth(date) + " " + date.getFullYear();
       }
 
-      var bottomValue = "W" + getWeekNumberISO8601(date);
+      var bottomValue = date.getDate().toString();
       bottomValues.push(React.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
@@ -1430,7 +1656,7 @@ var Calendar = function Calendar(_ref) {
       if (topValue) {
         if (i !== dates.length - 1) {
           topValues.push(React.createElement(TopPartOfCalendar, {
-            key: topValue,
+            key: topValue + i,
             value: topValue,
             x1Line: columnWidth * i + weeksCount * columnWidth,
             y1Line: 0,
@@ -1447,18 +1673,32 @@ var Calendar = function Calendar(_ref) {
       weeksCount++;
     }
 
-    return [topValues, bottomValues];
+    return [topValues, bottomValues, offDayRects];
   };
 
   var getCalendarValuesForDay = function getCalendarValuesForDay() {
+    var _projectCalendar$week;
+
     var topValues = [];
     var bottomValues = [];
+    var offDayRects = [];
+    var tickLines = [];
     var topDefaultHeight = headerHeight * 0.5;
     var dates = dateSetup.dates;
+    var weekStartDay = (_projectCalendar$week = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) != null ? _projectCalendar$week : 1;
 
     for (var i = 0; i < dates.length; i++) {
       var date = dates[i];
-      var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString() : getLocalDayOfWeek(date, locale, "narrow") + "," + date.getDate().toString();
+      var isWeekStart = date.getDay() === weekStartDay;
+      tickLines.push(React.createElement("line", {
+        key: "tick-day-" + i,
+        x1: columnWidth * i,
+        y1: topDefaultHeight,
+        x2: columnWidth * i,
+        y2: headerHeight,
+        className: isWeekStart ? styles$6.calendarTickSolid : styles$6.calendarTickDashed
+      }));
+      var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() : getLocalDayOfWeek(date, locale, "narrow") + "," + date.getDate();
       bottomValues.push(React.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
@@ -1467,9 +1707,9 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
-        var topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
+        var topValue = shortMonth(date) + " " + date.getFullYear();
         topValues.push(React.createElement(TopPartOfCalendar, {
-          key: topValue + date.getFullYear(),
+          key: topValue + i,
           value: topValue,
           x1Line: columnWidth * (i + 1),
           y1Line: 0,
@@ -1480,10 +1720,10 @@ var Calendar = function Calendar(_ref) {
       }
 
       if (i + 1 === dates.length) {
-        var _topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
+        var _topValue = shortMonth(date) + " " + date.getFullYear();
 
         topValues.push(React.createElement(TopPartOfCalendar, {
-          key: _topValue + date.getFullYear(),
+          key: _topValue + "last",
           value: _topValue,
           x1Line: columnWidth * (i + 1),
           y1Line: 0,
@@ -1494,7 +1734,7 @@ var Calendar = function Calendar(_ref) {
       }
     }
 
-    return [topValues, bottomValues];
+    return [topValues, bottomValues, offDayRects, tickLines];
   };
 
   var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
@@ -1518,7 +1758,7 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
+        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + shortMonth(date);
         topValues.push(React.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1555,7 +1795,7 @@ var Calendar = function Calendar(_ref) {
 
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
         var displayDate = dates[i - 1];
-        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + getLocaleMonth(displayDate, locale);
+        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + shortMonth(displayDate);
         var topPosition = (date.getHours() - 24) / 2;
         topValues.push(React.createElement(TopPartOfCalendar, {
           key: topValue + displayDate.getFullYear(),
@@ -1574,6 +1814,8 @@ var Calendar = function Calendar(_ref) {
 
   var topValues = [];
   var bottomValues = [];
+  var extraValues = [];
+  var tickLines = [];
 
   switch (dateSetup.viewMode) {
     case ViewMode.Year:
@@ -1584,46 +1826,57 @@ var Calendar = function Calendar(_ref) {
       break;
 
     case ViewMode.Quarter:
-      var _getCalendarValuesFor2 = getCalendarValuesForQuarter();
-
-      topValues = _getCalendarValuesFor2[0];
-      bottomValues = _getCalendarValuesFor2[1];
-      break;
+      {
+        var r = getCalendarValuesForQuarter();
+        topValues = r[0];
+        bottomValues = r[1];
+        extraValues = r[2] || [];
+        break;
+      }
 
     case ViewMode.Month:
-      var _getCalendarValuesFor3 = getCalendarValuesForMonth();
+      {
+        var _r = getCalendarValuesForMonth();
 
-      topValues = _getCalendarValuesFor3[0];
-      bottomValues = _getCalendarValuesFor3[1];
-      break;
+        topValues = _r[0];
+        bottomValues = _r[1];
+        extraValues = _r[2] || [];
+        break;
+      }
 
     case ViewMode.Week:
-      var _getCalendarValuesFor4 = getCalendarValuesForWeek();
+      {
+        var _r2 = getCalendarValuesForWeek();
 
-      topValues = _getCalendarValuesFor4[0];
-      bottomValues = _getCalendarValuesFor4[1];
-      break;
+        topValues = _r2[0];
+        bottomValues = _r2[1];
+        extraValues = _r2[2] || [];
+        break;
+      }
 
     case ViewMode.Day:
-      var _getCalendarValuesFor5 = getCalendarValuesForDay();
-
-      topValues = _getCalendarValuesFor5[0];
-      bottomValues = _getCalendarValuesFor5[1];
-      break;
+      {
+        var result = getCalendarValuesForDay();
+        topValues = result[0];
+        bottomValues = result[1];
+        extraValues = result[2];
+        tickLines = result[3];
+        break;
+      }
 
     case ViewMode.QuarterDay:
     case ViewMode.HalfDay:
-      var _getCalendarValuesFor6 = getCalendarValuesForPartOfDay();
+      var _getCalendarValuesFor2 = getCalendarValuesForPartOfDay();
 
-      topValues = _getCalendarValuesFor6[0];
-      bottomValues = _getCalendarValuesFor6[1];
+      topValues = _getCalendarValuesFor2[0];
+      bottomValues = _getCalendarValuesFor2[1];
       break;
 
     case ViewMode.Hour:
-      var _getCalendarValuesFor7 = getCalendarValuesForHour();
+      var _getCalendarValuesFor3 = getCalendarValuesForHour();
 
-      topValues = _getCalendarValuesFor7[0];
-      bottomValues = _getCalendarValuesFor7[1];
+      topValues = _getCalendarValuesFor3[0];
+      bottomValues = _getCalendarValuesFor3[1];
   }
 
   return React.createElement("g", {
@@ -1637,7 +1890,7 @@ var Calendar = function Calendar(_ref) {
     width: columnWidth * dateSetup.dates.length,
     height: headerHeight,
     className: styles$6.calendarHeader
-  }), bottomValues, " ", topValues);
+  }), extraValues, tickLines, bottomValues, topValues);
 };
 
 // A type of promise-like that resolves synchronously and supports only one observer
@@ -1691,19 +1944,31 @@ var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeig
   var verticalOffset = indexCompare * (rowHeight / 2);
 
   var minX = function minX(t) {
-    if (t.x1 && t.actualx1) {
-      return Math.min(t.x1, t.actualx1);
-    } else if (t.x1) {
-      return t.x1;
-    } else if (t.actualx1) {
-      return t.actualx1;
-    } else {
-      return 0;
+    if (t.plannedSegments && t.plannedSegments.length > 0) {
+      var p = t.plannedSegments[0].x1;
+      if (t.actualSegments && t.actualSegments.length > 0) return Math.min(p, t.actualSegments[0].x1);
+      return p;
     }
+
+    if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[0].x1;
+    var candidates = [];
+    if (t.x1 !== undefined && t.x1 >= 0) candidates.push(t.x1);
+    if (t.actualx1 !== undefined && t.actualx1 >= 0) candidates.push(t.actualx1);
+    return candidates.length > 0 ? Math.min.apply(Math, candidates) : 0;
   };
 
   var maxX = function maxX(t) {
-    return Math.max(t.x2 || 0, t.actualx2 || 0);
+    if (t.plannedSegments && t.plannedSegments.length > 0) {
+      var p = t.plannedSegments[t.plannedSegments.length - 1].x2;
+      if (t.actualSegments && t.actualSegments.length > 0) return Math.max(p, t.actualSegments[t.actualSegments.length - 1].x2);
+      return p;
+    }
+
+    if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[t.actualSegments.length - 1].x2;
+    var candidates = [];
+    if (t.x2 !== undefined && t.x2 >= 0) candidates.push(t.x2);
+    if (t.actualx2 !== undefined && t.actualx2 >= 0) candidates.push(t.actualx2);
+    return candidates.length > 0 ? Math.max.apply(Math, candidates) : 0;
   };
 
   var fromPoint, toPoint;
@@ -1830,10 +2095,10 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
     actualx1 = task.actualStart ? taskXCoordinateRTL(task.actualStart, dates, columnWidth) : -1;
     actualx2 = task.actualEnd ? taskXCoordinateRTL(task.actualEnd, dates, columnWidth) : -1;
   } else {
-    x1 = task.start ? taskXCoordinate(task.start, dates, columnWidth) : -1;
-    x2 = task.end ? taskXCoordinate(task.end, dates, columnWidth) : -1;
-    actualx1 = task.actualStart ? taskXCoordinate(task.actualStart, dates, columnWidth) : -1;
-    actualx2 = task.actualEnd ? taskXCoordinate(task.actualEnd, dates, columnWidth) : -1;
+    x1 = task.start ? taskXCoordinate(startOfDate(task.start, "day"), dates, columnWidth) : -1;
+    x2 = task.end ? taskXCoordinate(addToDate(startOfDate(task.end, "day"), 1, "day"), dates, columnWidth) : -1;
+    actualx1 = task.actualStart ? taskXCoordinate(startOfDate(task.actualStart, "day"), dates, columnWidth) : -1;
+    actualx2 = task.actualEnd ? taskXCoordinate(addToDate(startOfDate(task.actualEnd, "day"), 1, "day"), dates, columnWidth) : -1;
   }
 
   progressStartWidth = actualx1 && x1 ? Math.abs(actualx1 - x1) : -1;
@@ -1846,6 +2111,39 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
 
   var y = taskYCoordinate(index, rowHeight, taskHeight);
   var hideChildren = task.hideChildren || false;
+  var plannedSegments;
+  var actualSegments;
+
+  if (task.calender && task.start && task.end && task.start.getTime() > 0) {
+    var planEnd = addToDate(startOfDate(task.end, "day"), 1, "day");
+    var intervals = getWorkingIntervals(task.start, planEnd, task.calender);
+    var segs = intervals.map(function (iv) {
+      return {
+        x1: taskXCoordinate(iv.start, dates, columnWidth),
+        x2: taskXCoordinate(iv.end, dates, columnWidth)
+      };
+    }).filter(function (s) {
+      return s.x2 > s.x1;
+    });
+    if (segs.length > 0) plannedSegments = segs;
+  }
+
+  if (task.calender && task.actualStart && task.actualEnd && task.actualStart.getTime() > 0) {
+    var actEnd = addToDate(startOfDate(task.actualEnd, "day"), 1, "day");
+
+    var _intervals = getWorkingIntervals(task.actualStart, actEnd, task.calender);
+
+    var _segs = _intervals.map(function (iv) {
+      return {
+        x1: taskXCoordinate(iv.start, dates, columnWidth),
+        x2: taskXCoordinate(iv.end, dates, columnWidth)
+      };
+    }).filter(function (s) {
+      return s.x2 > s.x1;
+    });
+
+    if (_segs.length > 0) actualSegments = _segs;
+  }
 
   var styles = _extends({
     backgroundColor: barBackgroundColor,
@@ -1871,7 +2169,9 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
     hideChildren: hideChildren,
     height: taskHeight,
     barChildren: [],
-    styles: styles
+    styles: styles,
+    plannedSegments: plannedSegments,
+    actualSegments: actualSegments
   });
 };
 
@@ -2237,6 +2537,7 @@ var BarDisplay = function BarDisplay(_ref) {
       progressWidth = _ref.progressWidth,
       barCornerRadius = _ref.barCornerRadius,
       styles = _ref.styles,
+      segments = _ref.segments,
       onMouseDown = _ref.onMouseDown;
 
   var getProcessColor = function getProcessColor() {
@@ -2247,45 +2548,121 @@ var BarDisplay = function BarDisplay(_ref) {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 
-  if (type == "planned") return React.createElement("g", {
-    onMouseDown: onMouseDown
-  }, React.createElement("rect", {
-    x: x,
-    width: width,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: getBarColor(),
-    strokeWidth: 2,
-    stroke: styles.criticalPathColor
-  }), React.createElement("rect", {
-    x: progressX,
-    width: progressWidth,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: getProcessColor()
-  }));else return React.createElement("g", {
-    onMouseDown: onMouseDown
-  }, React.createElement("rect", {
-    x: x,
-    width: width,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: styles.taskProgressColor
-  }), React.createElement("rect", {
-    x: progressX,
-    width: progressWidth,
-    y: y,
-    height: height,
-    ry: barCornerRadius,
-    rx: barCornerRadius,
-    fill: getProcessColor()
-  }));
+  if (type === "planned") {
+    if (segments && segments.length > 0) {
+      var totalWidth = width;
+      return React.createElement("g", {
+        onMouseDown: onMouseDown
+      }, segments.map(function (seg, idx) {
+        return React.createElement("rect", {
+          key: "seg-" + idx,
+          x: seg.x1,
+          width: seg.x2 - seg.x1,
+          y: y,
+          height: height,
+          ry: barCornerRadius,
+          rx: barCornerRadius,
+          fill: getBarColor(),
+          strokeWidth: 2,
+          stroke: styles.criticalPathColor
+        });
+      }), progressWidth > 0 && function () {
+        var rects = [];
+        var remaining = progressWidth;
+
+        for (var _iterator = _createForOfIteratorHelperLoose(segments), _step; !(_step = _iterator()).done;) {
+          var seg = _step.value;
+          if (remaining <= 0) break;
+          var segW = seg.x2 - seg.x1;
+          var ratio = totalWidth > 0 ? segW / totalWidth : 0;
+          var pw = Math.min(remaining, progressWidth * ratio);
+
+          if (pw > 0) {
+            rects.push(React.createElement("rect", {
+              key: "prog-" + seg.x1,
+              x: seg.x1,
+              width: pw,
+              y: y,
+              height: height,
+              ry: barCornerRadius,
+              rx: barCornerRadius,
+              fill: getProcessColor()
+            }));
+            remaining -= pw;
+          }
+        }
+
+        return rects;
+      }());
+    }
+
+    return React.createElement("g", {
+      onMouseDown: onMouseDown
+    }, React.createElement("rect", {
+      x: x,
+      width: width,
+      y: y,
+      height: height,
+      ry: barCornerRadius,
+      rx: barCornerRadius,
+      fill: getBarColor(),
+      strokeWidth: 2,
+      stroke: styles.criticalPathColor
+    }), React.createElement("rect", {
+      x: progressX,
+      width: progressWidth,
+      y: y,
+      height: height,
+      ry: barCornerRadius,
+      rx: barCornerRadius,
+      fill: getProcessColor()
+    }));
+  } else {
+    if (segments && segments.length > 0) {
+      return React.createElement("g", {
+        onMouseDown: onMouseDown
+      }, segments.map(function (seg, idx) {
+        return React.createElement("rect", {
+          key: "aseg-" + idx,
+          x: seg.x1,
+          width: seg.x2 - seg.x1,
+          y: y,
+          height: height,
+          ry: barCornerRadius,
+          rx: barCornerRadius,
+          fill: styles.taskProgressColor
+        });
+      }), React.createElement("rect", {
+        x: progressX,
+        width: progressWidth,
+        y: y,
+        height: height,
+        ry: barCornerRadius,
+        rx: barCornerRadius,
+        fill: getProcessColor()
+      }));
+    }
+
+    return React.createElement("g", {
+      onMouseDown: onMouseDown
+    }, React.createElement("rect", {
+      x: x,
+      width: width,
+      y: y,
+      height: height,
+      ry: barCornerRadius,
+      rx: barCornerRadius,
+      fill: styles.taskProgressColor
+    }), React.createElement("rect", {
+      x: progressX,
+      width: progressWidth,
+      y: y,
+      height: height,
+      ry: barCornerRadius,
+      rx: barCornerRadius,
+      fill: getProcessColor()
+    }));
+  }
 };
 
 var styles$7 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
@@ -2325,12 +2702,24 @@ var Bar = function Bar(_ref) {
       isSelected = _ref.isSelected;
   var progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
   var handleHeight = task.height / 2 - 1;
+  var plannedSegs = task.plannedSegments;
+  var plannedLeftHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[0].x1 : task.x1;
+  var plannedRightHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[plannedSegs.length - 1].x2 : task.x2;
+  var actualSegs = task.actualSegments;
+  var actualLeftHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[0].x1 : task.actualx1;
+  var actualRightHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[actualSegs.length - 1].x2 : task.actualx2;
 
   if (type == "planned") {
     if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0 && task.x2 - task.x1 >= 0) return React.createElement("g", {
       className: styles$7.barWrapper,
       tabIndex: 0
-    }, React.createElement(BarDisplay, {
+    }, React.createElement("rect", {
+      x: task.x1,
+      y: task.y,
+      width: task.x2 - task.x1,
+      height: task.height / 2,
+      fill: "transparent"
+    }), React.createElement(BarDisplay, {
       x: task.x1,
       y: task.y,
       type: type,
@@ -2343,13 +2732,14 @@ var Bar = function Bar(_ref) {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
+      segments: task.plannedSegments,
       onMouseDown: function onMouseDown(e) {
         isDateChangeable && onEventStart("move", task, e, "planned");
       }
     }), React.createElement("g", {
       className: "handleGroup"
     }, isDateChangeable && React.createElement("g", null, React.createElement(BarDateHandle, {
-      x: task.x1 + 1,
+      x: plannedLeftHandleX + 1,
       y: task.y + 1,
       width: task.handleWidth,
       height: handleHeight,
@@ -2358,7 +2748,7 @@ var Bar = function Bar(_ref) {
         onEventStart("start", task, e, "planned");
       }
     }), React.createElement(BarDateHandle, {
-      x: task.x2 - task.handleWidth - 1,
+      x: plannedRightHandleX - task.handleWidth - 1,
       y: task.y + 1,
       width: task.handleWidth,
       height: handleHeight,
@@ -2379,7 +2769,13 @@ var Bar = function Bar(_ref) {
     return React.createElement("g", {
       className: styles$7.barWrapper,
       tabIndex: 0
-    }, React.createElement(BarDisplay, {
+    }, React.createElement("rect", {
+      x: task.actualx1,
+      y: task.y + task.height / 2,
+      width: task.actualx2 - task.actualx1,
+      height: task.height / 2,
+      fill: "transparent"
+    }), React.createElement(BarDisplay, {
       x: task.actualx1,
       y: task.y + task.height / 2,
       type: type,
@@ -2392,13 +2788,14 @@ var Bar = function Bar(_ref) {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
+      segments: task.actualSegments,
       onMouseDown: function onMouseDown(e) {
         isDateChangeable && onEventStart("move", task, e, "actual");
       }
     }), React.createElement("g", {
       className: "handleGroup"
     }, isDateChangeable && React.createElement("g", null, React.createElement(BarDateHandle, {
-      x: task.actualx1 + 1,
+      x: actualLeftHandleX + 1,
       y: task.y + task.height / 2 + 1,
       width: task.handleWidth,
       height: handleHeight,
@@ -2407,7 +2804,7 @@ var Bar = function Bar(_ref) {
         onEventStart("start", task, e, "actual");
       }
     }), React.createElement(BarDateHandle, {
-      x: task.actualx2 - task.handleWidth - 1,
+      x: actualRightHandleX - task.handleWidth - 1,
       y: task.y + task.height / 2 + 1,
       width: task.handleWidth,
       height: handleHeight,
@@ -2669,11 +3066,14 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       setGanttEvent = _ref.setGanttEvent,
       setFailedTask = _ref.setFailedTask,
       setSelectedTask = _ref.setSelectedTask,
+      onBarTasksUpdate = _ref.onBarTasksUpdate,
       onDateChange = _ref.onDateChange,
       onProgressChange = _ref.onProgressChange,
       onDoubleClick = _ref.onDoubleClick,
       onClick = _ref.onClick,
       onDelete = _ref.onDelete,
+      onCalendarError = _ref.onCalendarError,
+      projectCalendar = _ref.projectCalendar,
       visibleStartY = _ref.visibleStartY,
       visibleEndY = _ref.visibleEndY;
   var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
@@ -2710,9 +3110,98 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
             changedTask = _handleTaskBySVGMouse.changedTask;
 
         if (isChanged) {
+          var finalTask = _extends({}, changedTask);
+
+          var dragType = ganttEvent.type;
+
+          if (changedTask.calender && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
+            var cal = finalTask.calender;
+
+            if (dragType === "actual") {
+              if (ganttEvent.action === "end") {
+                var snapped = snapToWorkingTime(finalTask.actualEnd, cal, "forward");
+                finalTask.actualEnd = snapped;
+                finalTask.actualx2 = taskXCoordinate(snapped, dates, columnWidth);
+              } else if (ganttEvent.action === "start") {
+                var _snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+
+                finalTask.actualStart = _snapped;
+                finalTask.actualx1 = taskXCoordinate(_snapped, dates, columnWidth);
+              } else {
+                var _snapped2 = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+
+                var delta = _snapped2.getTime() - finalTask.actualStart.getTime();
+                finalTask.actualStart = _snapped2;
+                finalTask.actualEnd = new Date(finalTask.actualEnd.getTime() + delta);
+                finalTask.actualx1 = taskXCoordinate(finalTask.actualStart, dates, columnWidth);
+                finalTask.actualx2 = taskXCoordinate(finalTask.actualEnd, dates, columnWidth);
+              }
+
+              var actEnd = addToDate(startOfDate(finalTask.actualEnd, "day"), 1, "day");
+              var actIntervals = getWorkingIntervals(finalTask.actualStart, actEnd, cal);
+              var actSegs = actIntervals.map(function (iv) {
+                return {
+                  x1: taskXCoordinate(iv.start, dates, columnWidth),
+                  x2: taskXCoordinate(iv.end, dates, columnWidth)
+                };
+              }).filter(function (s) {
+                return s.x2 > s.x1;
+              });
+              finalTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
+              var actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+              finalTask.actualDuration = actDays;
+            } else {
+              if (ganttEvent.action === "end") {
+                var _snapped3 = snapToWorkingTime(finalTask.end, cal, "forward");
+
+                finalTask.end = _snapped3;
+                finalTask.x2 = taskXCoordinate(_snapped3, dates, columnWidth);
+              } else if (ganttEvent.action === "start") {
+                var _snapped4 = snapToWorkingTime(finalTask.start, cal, "forward");
+
+                finalTask.start = _snapped4;
+                finalTask.x1 = taskXCoordinate(_snapped4, dates, columnWidth);
+              } else {
+                var _snapped5 = snapToWorkingTime(finalTask.start, cal, "forward");
+
+                var _delta = _snapped5.getTime() - finalTask.start.getTime();
+
+                finalTask.start = _snapped5;
+                finalTask.end = new Date(finalTask.end.getTime() + _delta);
+                finalTask.x1 = taskXCoordinate(finalTask.start, dates, columnWidth);
+                finalTask.x2 = taskXCoordinate(finalTask.end, dates, columnWidth);
+              }
+
+              var planEnd = addToDate(startOfDate(finalTask.end, "day"), 1, "day");
+              var planIntervals = getWorkingIntervals(finalTask.start, planEnd, cal);
+              var planSegs = planIntervals.map(function (iv) {
+                return {
+                  x1: taskXCoordinate(iv.start, dates, columnWidth),
+                  x2: taskXCoordinate(iv.end, dates, columnWidth)
+                };
+              }).filter(function (s) {
+                return s.x2 > s.x1;
+              });
+              finalTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
+              var planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+              finalTask.plannedDuration = planDays;
+            }
+          } else {
+            if (dragType === "actual") {
+              var _actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+
+              finalTask.actualDuration = _actDays;
+            } else {
+              var _planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+
+              finalTask.plannedDuration = _planDays;
+            }
+          }
+
           setGanttEvent({
             action: ganttEvent.action,
-            changedTask: changedTask
+            changedTask: finalTask,
+            type: dragType
           });
         }
 
@@ -2745,8 +3234,123 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
             newChangedTask = _handleTaskBySVGMouse2.changedTask;
 
         var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
+        var dropType = type;
+
+        if (newChangedTask.calender && (action === "move" || action === "end" || action === "start")) {
+          var cal = newChangedTask.calender;
+
+          if (dropType === "actual") {
+            if (action === "end") {
+              var snappedEnd = snapToWorkingTime(newChangedTask.actualEnd, cal, "forward");
+              newChangedTask.actualEnd = snappedEnd;
+              newChangedTask.actualx2 = taskXCoordinate(snappedEnd, dates, columnWidth);
+            } else if (action === "start") {
+              var snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+
+              if (snappedStart >= newChangedTask.actualEnd) {
+                setFailedTask(originalSelectedTask);
+                onCalendarError === null || onCalendarError === void 0 ? void 0 : onCalendarError(newChangedTask, "No working time in selected range");
+                setGanttEvent({
+                  action: ""
+                });
+                setIsMoving(false);
+                svg.current.removeEventListener("mousemove", handleMouseMove);
+                svg.current.removeEventListener("mouseup", handleMouseUp);
+                return Promise.resolve();
+              }
+
+              newChangedTask.actualStart = snappedStart;
+              newChangedTask.actualx1 = taskXCoordinate(snappedStart, dates, columnWidth);
+            } else {
+              var _snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+
+              var delta = _snappedStart.getTime() - newChangedTask.actualStart.getTime();
+              newChangedTask.actualStart = _snappedStart;
+              newChangedTask.actualEnd = new Date(newChangedTask.actualEnd.getTime() + delta);
+              newChangedTask.actualx1 = taskXCoordinate(_snappedStart, dates, columnWidth);
+              newChangedTask.actualx2 = taskXCoordinate(newChangedTask.actualEnd, dates, columnWidth);
+            }
+
+            var actEnd = addToDate(startOfDate(newChangedTask.actualEnd, "day"), 1, "day");
+            var actIntervals = getWorkingIntervals(newChangedTask.actualStart, actEnd, cal);
+            var actSegs = actIntervals.map(function (iv) {
+              return {
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              };
+            }).filter(function (s) {
+              return s.x2 > s.x1;
+            });
+            newChangedTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
+            var actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+            newChangedTask.actualDuration = actDays;
+          } else {
+            if (action === "end") {
+              var _snappedEnd = snapToWorkingTime(newChangedTask.end, cal, "forward");
+
+              newChangedTask.end = _snappedEnd;
+              newChangedTask.x2 = taskXCoordinate(_snappedEnd, dates, columnWidth);
+            } else if (action === "start") {
+              var _snappedStart2 = snapToWorkingTime(newChangedTask.start, cal, "forward");
+
+              if (_snappedStart2 >= newChangedTask.end) {
+                setFailedTask(originalSelectedTask);
+                onCalendarError === null || onCalendarError === void 0 ? void 0 : onCalendarError(newChangedTask, "No working time in selected range");
+                setGanttEvent({
+                  action: ""
+                });
+                setIsMoving(false);
+                svg.current.removeEventListener("mousemove", handleMouseMove);
+                svg.current.removeEventListener("mouseup", handleMouseUp);
+                return Promise.resolve();
+              }
+
+              newChangedTask.start = _snappedStart2;
+              newChangedTask.x1 = taskXCoordinate(_snappedStart2, dates, columnWidth);
+            } else {
+              var _snappedStart3 = snapToWorkingTime(newChangedTask.start, cal, "forward");
+
+              var _delta2 = _snappedStart3.getTime() - newChangedTask.start.getTime();
+
+              newChangedTask.start = _snappedStart3;
+              newChangedTask.end = new Date(newChangedTask.end.getTime() + _delta2);
+              newChangedTask.x1 = taskXCoordinate(_snappedStart3, dates, columnWidth);
+              newChangedTask.x2 = taskXCoordinate(newChangedTask.end, dates, columnWidth);
+            }
+
+            var planEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
+            var planIntervals = getWorkingIntervals(newChangedTask.start, planEnd, cal);
+            var planSegs = planIntervals.map(function (iv) {
+              return {
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              };
+            }).filter(function (s) {
+              return s.x2 > s.x1;
+            });
+            newChangedTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
+            var planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+            newChangedTask.plannedDuration = planDays;
+          }
+        } else if (action === "move" || action === "end" || action === "start") {
+          if (dropType === "actual") {
+            var _actDays2 = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+
+            newChangedTask.actualDuration = _actDays2;
+          } else {
+            var _planDays2 = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+
+            newChangedTask.plannedDuration = _planDays2;
+          }
+        }
+
         svg.current.removeEventListener("mousemove", handleMouseMove);
         svg.current.removeEventListener("mouseup", handleMouseUp);
+
+        if (onBarTasksUpdate && isNotLikeOriginal) {
+          onBarTasksUpdate(newChangedTask);
+        }
+
         setGanttEvent({
           action: ""
         });
@@ -2798,7 +3402,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       svg.current.addEventListener("mouseup", handleMouseUp);
       setIsMoving(true);
     }
-  }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
+  }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, onCalendarError, projectCalendar, svg, isMoving, point, rtl, setFailedTask, setGanttEvent, onBarTasksUpdate, dates, columnWidth]);
 
   var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
     try {
@@ -2884,7 +3488,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
   var getArrows = function getArrows(isCritical, criticalPathType) {
     return tasks.flatMap(function (_task) {
-      var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+      var _live = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? ganttEvent.changedTask : _task;
+
+      var task = _live.start.getTime() > 0 && _live.end.getTime() > 0 ? _live : undefined;
 
       if (!task) {
         return [];
@@ -2936,8 +3542,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     fontSize: fontSize
   }, virtualItems.map(function (vi) {
     var _task = tasks[vi.index];
-
-    var task = _extends({}, _task, {
+    var task = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? _extends({}, ganttEvent.changedTask, {
+      y: 0
+    }) : _extends({}, _task, {
       y: 0
     });
 
@@ -3093,6 +3700,8 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 };
 
 var Gantt = function Gantt(_ref) {
+  var _tasks$find$calender, _tasks$find;
+
   var tasks = _ref.tasks,
       _ref$leafTasks = _ref.leafTasks,
       leafTasks = _ref$leafTasks === void 0 ? [] : _ref$leafTasks,
@@ -3159,7 +3768,7 @@ var Gantt = function Gantt(_ref) {
       _ref$todayColor = _ref.todayColor,
       todayColor = _ref$todayColor === void 0 ? "rgba(252, 248, 227, 0.5)" : _ref$todayColor,
       _ref$weekendColor = _ref.weekendColor,
-      weekendColor = _ref$weekendColor === void 0 ? "#f5f5f5" : _ref$weekendColor,
+      weekendColor = _ref$weekendColor === void 0 ? "#e6e4e4" : _ref$weekendColor,
       viewDate = _ref.viewDate,
       _ref$TooltipContent = _ref.TooltipContent,
       TooltipContent = _ref$TooltipContent === void 0 ? StandardTooltipContent : _ref$TooltipContent,
@@ -3179,7 +3788,12 @@ var Gantt = function Gantt(_ref) {
       _ref$delayToRender = _ref.delayToRender,
       delayToRender = _ref$delayToRender === void 0 ? 500 : _ref$delayToRender,
       _ref$shouldNotShowLoa = _ref.shouldNotShowLoadingOverlay,
-      shouldNotShowLoadingOverlay = _ref$shouldNotShowLoa === void 0 ? true : _ref$shouldNotShowLoa;
+      shouldNotShowLoadingOverlay = _ref$shouldNotShowLoa === void 0 ? true : _ref$shouldNotShowLoa,
+      projectCalendar = _ref.projectCalendar,
+      onCalendarError = _ref.onCalendarError;
+  var effectiveCalendar = (_tasks$find$calender = (_tasks$find = tasks.find(function (t) {
+    return t.calender;
+  })) === null || _tasks$find === void 0 ? void 0 : _tasks$find.calender) != null ? _tasks$find$calender : projectCalendar;
   var wrapperRef = useRef(null);
   var taskListRef = useRef(null);
   var isDraggingTable = useRef(false);
@@ -3282,6 +3896,14 @@ var Gantt = function Gantt(_ref) {
       ganttEvent = _useState9[0],
       setGanttEvent = _useState9[1];
 
+  var handleBarTasksUpdate = function handleBarTasksUpdate(task) {
+    setBarTasks(function (prev) {
+      return prev.map(function (t) {
+        return t.id === task.id ? task : t;
+      });
+    });
+  };
+
   var taskHeight = useMemo(function () {
     return rowHeight * barFill / 100;
   }, [rowHeight, barFill]);
@@ -3294,7 +3916,11 @@ var Gantt = function Gantt(_ref) {
       failedTask = _useState11[0],
       setFailedTask = _useState11[1];
 
-  var svgWidth = columnWidth < 55 ? (dateSetup.dates.length + 0.5) * columnWidth : dateSetup.dates.length * columnWidth;
+  var effectiveColumnWidth = useMemo(function () {
+    if (svgContainerWidth <= 0 || dateSetup.dates.length <= 0) return columnWidth;
+    return Math.max(columnWidth, Math.ceil(svgContainerWidth / dateSetup.dates.length));
+  }, [columnWidth, svgContainerWidth, dateSetup.dates.length]);
+  var svgWidth = effectiveColumnWidth < 55 ? (dateSetup.dates.length + 0.5) * effectiveColumnWidth : dateSetup.dates.length * effectiveColumnWidth;
   var ganttFullHeight = useMemo(function () {
     return barTasks.length * rowHeight;
   }, [barTasks.length, rowHeight]);
@@ -3344,11 +3970,13 @@ var Gantt = function Gantt(_ref) {
     }
 
     debounceRef.current = setTimeout(function () {
+      var _effectiveCalendar$qu;
+
       var filteredTasks;
       filteredTasks = removeHiddenTasks(tasks);
       filteredTasks = filteredTasks.sort(sortTasks);
 
-      var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount),
+      var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount, (_effectiveCalendar$qu = effectiveCalendar === null || effectiveCalendar === void 0 ? void 0 : effectiveCalendar.quarter_start) != null ? _effectiveCalendar$qu : 0),
           startDateRange = _ganttDateRange2[0],
           endDateRange = _ganttDateRange2[1];
 
@@ -3362,7 +3990,7 @@ var Gantt = function Gantt(_ref) {
         newDates = newDates.reverse();
 
         if (scrollX === -1) {
-          setScrollX(newDates.length * columnWidth);
+          setScrollX(newDates.length * effectiveColumnWidth);
         }
       }
 
@@ -3384,10 +4012,10 @@ var Gantt = function Gantt(_ref) {
         colorPath(primaryPath, "#ff0000", tasks, "primary");
       }
 
-      setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
+      setBarTasks(convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
       setIsProcessing(false);
     }, delayToRender);
-  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, shouldNotShowLoadingOverlay]);
+  }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, shouldNotShowLoadingOverlay, effectiveColumnWidth, effectiveCalendar]);
   useEffect(function () {
     return function () {
       clearTimeout(debounceRef.current);
@@ -3405,9 +4033,9 @@ var Gantt = function Gantt(_ref) {
       }
 
       setCurrentViewDate(viewDate);
-      setScrollX(columnWidth * index);
+      setScrollX(effectiveColumnWidth * index);
     }
-  }, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode, currentViewDate, setCurrentViewDate]);
+  }, [viewDate, effectiveColumnWidth, dateSetup.dates, dateSetup.viewMode, viewMode, currentViewDate, setCurrentViewDate]);
   useEffect(function () {
     var changedTask = ganttEvent.changedTask,
         action = ganttEvent.action;
@@ -3420,17 +4048,6 @@ var Gantt = function Gantt(_ref) {
         setBarTasks(barTasks.filter(function (t) {
           return t.id !== changedTask.id;
         }));
-      } else if (action === "move" || action === "end" || action === "start" || action === "progress") {
-        var prevStateTask = barTasks.find(function (t) {
-          return t.id === changedTask.id;
-        });
-
-        if (prevStateTask && (prevStateTask.start.getTime() >= 0 && prevStateTask.start.getTime() !== changedTask.start.getTime() || prevStateTask.end.getTime() >= 0 && prevStateTask.end.getTime() !== changedTask.end.getTime() || (prevStateTask.actualStart.getTime() >= 0 && prevStateTask.actualStart.getTime()) !== changedTask.actualStart.getTime() || prevStateTask.actualEnd.getTime() >= 0 && prevStateTask.actualEnd.getTime() !== changedTask.actualEnd.getTime() || prevStateTask.progress !== changedTask.progress)) {
-          var newTaskList = barTasks.map(function (t) {
-            return t.id === changedTask.id ? changedTask : t;
-          });
-          setBarTasks(newTaskList);
-        }
       }
     }
   }, [ganttEvent, barTasks]);
@@ -3453,7 +4070,7 @@ var Gantt = function Gantt(_ref) {
   }, [taskListRef, listCellWidth]);
   useEffect(function () {
     if (wrapperRef.current) {
-      setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth);
+      setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth - 20);
     }
   }, [wrapperRef, taskListWidth]);
   useEffect(function () {
@@ -3599,12 +4216,12 @@ var Gantt = function Gantt(_ref) {
 
       case "Left":
       case "ArrowLeft":
-        newScrollX -= columnWidth;
+        newScrollX -= effectiveColumnWidth;
         break;
 
       case "Right":
       case "ArrowRight":
-        newScrollX += columnWidth;
+        newScrollX += effectiveColumnWidth;
         break;
     }
 
@@ -3659,7 +4276,7 @@ var Gantt = function Gantt(_ref) {
   };
 
   var gridProps = {
-    columnWidth: columnWidth,
+    columnWidth: effectiveColumnWidth,
     svgWidth: svgWidth,
     tasks: tasks,
     scheduleType: scheduleType,
@@ -3669,17 +4286,20 @@ var Gantt = function Gantt(_ref) {
     weekendColor: weekendColor,
     rtl: rtl,
     visibleStartY: visibleStartY,
-    visibleEndY: visibleEndY
+    visibleEndY: visibleEndY,
+    projectCalendar: effectiveCalendar,
+    viewMode: viewMode
   };
   var calendarProps = {
     dateSetup: dateSetup,
     locale: locale,
     viewMode: viewMode,
     headerHeight: headerHeight,
-    columnWidth: columnWidth,
+    columnWidth: effectiveColumnWidth,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    rtl: rtl
+    rtl: rtl,
+    projectCalendar: effectiveCalendar
   };
   var barProps = {
     tasks: barTasks,
@@ -3688,7 +4308,7 @@ var Gantt = function Gantt(_ref) {
     selectedTask: selectedTask,
     rowHeight: rowHeight,
     taskHeight: taskHeight,
-    columnWidth: columnWidth,
+    columnWidth: effectiveColumnWidth,
     arrowColor: arrowColor,
     timeStep: timeStep,
     fontFamily: fontFamily,
@@ -3699,20 +4319,28 @@ var Gantt = function Gantt(_ref) {
     setGanttEvent: setGanttEvent,
     setFailedTask: setFailedTask,
     setSelectedTask: handleSelectedTask,
+    onBarTasksUpdate: handleBarTasksUpdate,
     onDateChange: onDateChange,
     onProgressChange: onProgressChange,
     onDoubleClick: onDoubleClick,
     onClick: onClick,
     onDelete: onDelete,
+    onCalendarError: onCalendarError,
+    projectCalendar: effectiveCalendar,
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY
   };
+  var tableTasks = useMemo(function () {
+    return ganttEvent.changedTask ? barTasks.map(function (t) {
+      return t.id === ganttEvent.changedTask.id ? ganttEvent.changedTask : t;
+    }) : barTasks;
+  }, [barTasks, ganttEvent.changedTask]);
   var tableProps = {
     rowHeight: rowHeight,
     rowWidth: listCellWidth,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    tasks: barTasks,
+    tasks: tableTasks,
     leafTasks: leafTasks,
     scheduleType: scheduleType,
     locale: locale,
@@ -3780,7 +4408,8 @@ var Gantt = function Gantt(_ref) {
     taskListWidth: taskListWidth,
     TooltipContent: TooltipContent,
     rtl: rtl,
-    svgWidth: svgWidth
+    svgWidth: svgWidth,
+    isDragging: ganttEvent.action === "move" || ganttEvent.action === "start" || ganttEvent.action === "end" || ganttEvent.action === "progress"
   }), React.createElement(VerticalScroll, {
     ganttFullHeight: ganttFullHeight,
     ganttHeight: ganttHeight,