gantt-task-react-v 1.6.18 → 1.6.19

package/dist/gantt-task-react.umd.js

@@ -11397,6 +11397,278 @@
     ganttToday,
     ganttTodayCircle
   };
+  const getDateByOffset = (startDate, offset2, viewMode) => {
+    switch (viewMode) {
+      case ViewMode.Day:
+        return addDays(startDate, offset2);
+      case ViewMode.HalfDay:
+        return addHours(startDate, offset2 * 12);
+      case ViewMode.QuarterDay:
+        return addHours(startDate, offset2 * 6);
+      case ViewMode.Hour:
+        return addHours(startDate, offset2);
+      case ViewMode.Month:
+        return addMonths(startDate, offset2);
+      case ViewMode.Week:
+        return addWeeks(startDate, offset2);
+      case ViewMode.Year:
+        return addYears(startDate, offset2);
+      default:
+        throw new Error("Unknown view mode");
+    }
+  };
+  const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
+    const index2 = getDatesDiff(xDate, startDate, viewMode);
+    const currentDate = getDateByOffset(startDate, index2, viewMode);
+    const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
+    const remainderMillis = xDate.getTime() - currentDate.getTime();
+    const intervalDuration = nextDate.getTime() - currentDate.getTime();
+    const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
+    const result = index2 * columnWidth + percentOfInterval * columnWidth;
+    return isNaN(result) || !isFinite(result) ? 0 : result;
+  };
+  const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
+    const index2 = getDatesDiff(xDate, startDate, viewMode);
+    const currentDate = getDateByOffset(startDate, index2, viewMode);
+    const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
+    const remainderMillis = xDate.getTime() - currentDate.getTime();
+    const intervalDuration = nextDate.getTime() - currentDate.getTime();
+    const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
+    const result = index2 * columnWidth + percentOfInterval * columnWidth;
+    return isNaN(result) || !isFinite(result) ? 0 : result;
+  };
+  const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
+    const safeTaskX1 = isNaN(taskX1) || !isFinite(taskX1) ? 0 : taskX1;
+    const safeTaskX2 = isNaN(taskX2) || !isFinite(taskX2) ? 0 : taskX2;
+    const safeProgress = isNaN(progress) || !isFinite(progress) ? 0 : progress;
+    const progressWidth = Math.max(
+      (safeTaskX2 - safeTaskX1) * safeProgress * 0.01,
+      0
+    );
+    let progressX;
+    if (rtl) {
+      progressX = safeTaskX2 - progressWidth;
+    } else {
+      progressX = safeTaskX1;
+    }
+    return [progressWidth, progressX];
+  };
+  const getProgressPoint = (progressX, taskY, taskHeight) => {
+    const point = [
+      progressX - 5,
+      taskY + taskHeight,
+      progressX + 5,
+      taskY + taskHeight,
+      progressX,
+      taskY + taskHeight - 8.66
+    ];
+    return point.join(",");
+  };
+  const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
+    const safeX = isNaN(x) || !isFinite(x) ? 0 : x;
+    const safeTaskX = isNaN(taskX) || !isFinite(taskX) ? 0 : taskX;
+    const safeXStep = isNaN(xStep) || !isFinite(xStep) || xStep === 0 ? 1 : xStep;
+    const safeTimeStep = isNaN(timeStep) || !isFinite(timeStep) ? 0 : timeStep;
+    let newDate = new Date(
+      (safeX - safeTaskX) / safeXStep * safeTimeStep + taskDate.getTime()
+    );
+    newDate = new Date(
+      newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
+    );
+    return newDate;
+  };
+  const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
+    let result;
+    switch (selectedTask.type) {
+      case "milestone":
+        result = handleTaskBySVGMouseEventForMilestone(
+          action,
+          selectedTask,
+          initialCoordinates,
+          coordinates,
+          xStep,
+          timeStep
+        );
+        break;
+      default:
+        result = handleTaskBySVGMouseEventForBar(
+          action,
+          selectedTask,
+          initialCoordinates,
+          coordinates,
+          xStep,
+          timeStep,
+          rtl
+        );
+        break;
+    }
+    return result;
+  };
+  const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
+    const changedTask = { ...selectedTask };
+    let isChanged = false;
+    switch (action) {
+      case "progress":
+        isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
+        if (isChanged) {
+          changedTask.progress = Math.round(
+            coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
+          );
+        }
+        break;
+      case "start": {
+        isChanged = initialCoordinates.x1 !== coordinates.x1;
+        if (isChanged) {
+          if (rtl) {
+            changedTask.end = dateByX(
+              coordinates.x1,
+              initialCoordinates.x1,
+              selectedTask.end,
+              xStep,
+              timeStep
+            );
+          } else {
+            changedTask.start = dateByX(
+              coordinates.x1,
+              initialCoordinates.x1,
+              selectedTask.start,
+              xStep,
+              timeStep
+            );
+          }
+        }
+        break;
+      }
+      case "end": {
+        isChanged = initialCoordinates.x2 !== coordinates.x2;
+        if (isChanged) {
+          if (rtl) {
+            changedTask.start = dateByX(
+              coordinates.x2,
+              initialCoordinates.x2,
+              selectedTask.start,
+              xStep,
+              timeStep
+            );
+          } else {
+            changedTask.end = dateByX(
+              coordinates.x2,
+              initialCoordinates.x2,
+              selectedTask.end,
+              xStep,
+              timeStep
+            );
+          }
+        }
+        break;
+      }
+      case "move": {
+        isChanged = initialCoordinates.x1 !== coordinates.x1;
+        if (isChanged) {
+          if (rtl) {
+            changedTask.end = dateByX(
+              coordinates.x1,
+              initialCoordinates.x1,
+              selectedTask.end,
+              xStep,
+              timeStep
+            );
+            changedTask.start = dateByX(
+              coordinates.x2,
+              initialCoordinates.x2,
+              selectedTask.start,
+              xStep,
+              timeStep
+            );
+          } else {
+            changedTask.start = dateByX(
+              coordinates.x1,
+              initialCoordinates.x1,
+              selectedTask.start,
+              xStep,
+              timeStep
+            );
+            changedTask.end = dateByX(
+              coordinates.x2,
+              initialCoordinates.x2,
+              selectedTask.end,
+              xStep,
+              timeStep
+            );
+          }
+        }
+        break;
+      }
+    }
+    return { isChanged, changedTask };
+  };
+  const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
+    const changedTask = { ...selectedTask };
+    const isChanged = coordinates.x1 !== initialCoordinates.x1;
+    if (isChanged) {
+      switch (action) {
+        case "move": {
+          changedTask.start = dateByX(
+            coordinates.x1,
+            initialCoordinates.x1,
+            selectedTask.start,
+            xStep,
+            timeStep
+          );
+          changedTask.end = changedTask.start;
+          break;
+        }
+      }
+    }
+    return { isChanged, changedTask };
+  };
+  const DateLine = ({
+    config,
+    additionalLeftSpace,
+    startDate,
+    viewMode,
+    columnWidth,
+    rtl,
+    ganttFullHeight
+  }) => {
+    const tickX = taskXCoordinate(config.date, startDate, viewMode, columnWidth);
+    const x = rtl ? tickX + columnWidth : tickX;
+    const absX = additionalLeftSpace + x;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: absX,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
+          fill: config.color,
+          strokeDasharray: config.dashArray
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          className: styles$d.ganttTodayCircle,
+          cx: absX + 1,
+          cy: 6,
+          r: 6,
+          fill: config.color
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: absX + 10,
+          y: 10,
+          fill: config.color,
+          fontSize: 12,
+          fontWeight: 600,
+          children: config.label
+        }
+      )
+    ] });
+  };
   const GanttTodayInner = ({
     additionalLeftSpace,
     distances: { columnWidth },
@@ -11407,167 +11679,117 @@
     viewMode,
     showTodayLine = true,
     showDataDateLine = false,
+    showProjectStartLine = false,
+    showProjectEndLine = false,
     dataDate = null,
+    projectStartDate = null,
+    projectEndDate = null,
     todayColor = null,
     dataDateColor = null,
+    projectStartColor = null,
+    projectEndColor = null,
     todayLabel = "Today",
-    dataDateLabel = "Data Date"
+    dataDateLabel = "Data Date",
+    projectStartLabel = "Project Start",
+    projectEndLabel = "Project End"
   }) => {
+    const lineProps = React.useMemo(
+      () => ({
+        additionalLeftSpace,
+        startDate,
+        viewMode,
+        columnWidth,
+        rtl,
+        ganttFullHeight
+      }),
+      [
+        additionalLeftSpace,
+        startDate,
+        viewMode,
+        columnWidth,
+        rtl,
+        ganttFullHeight
+      ]
+    );
     const todayElement = React.useMemo(() => {
       if (isUnknownDates || !showTodayLine) {
         return null;
       }
-      const today = /* @__PURE__ */ new Date();
-      const todayIndex = getDatesDiff(today, startDate, viewMode);
-      const extraMultiplier = () => {
-        switch (viewMode) {
-          case ViewMode.Week: {
-            const percent = today.getDay() / 7;
-            return 1 + percent * 0.2;
-          }
-          case ViewMode.Month: {
-            const dayInMonth = today.getDate();
-            const maxDaysInMonth = getDaysInMonth(
-              today.getMonth(),
-              today.getFullYear()
-            );
-            const percent = dayInMonth / maxDaysInMonth;
-            return 1 + percent * 0.5;
-          }
-          case ViewMode.Year: {
-            const percent = today.getMonth() / 12;
-            return 1 + percent * 0.5;
-          }
-          default:
-            return 1;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DateLine,
+        {
+          config: {
+            date: /* @__PURE__ */ new Date(),
+            color: todayColor || "var(--gantt-calendar-today-color)",
+            label: todayLabel
+          },
+          ...lineProps
         }
-      };
-      const tickX = todayIndex * columnWidth * extraMultiplier();
-      const x = rtl ? tickX + columnWidth : tickX;
-      const color = todayColor || "var(--gantt-calendar-today-color)";
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
-          {
-            x: additionalLeftSpace + x,
-            y: 0,
-            width: 2,
-            height: ganttFullHeight,
-            fill: color
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            className: styles$d.ganttTodayCircle,
-            cx: x + 1,
-            cy: 6,
-            r: 6,
-            fill: color
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: additionalLeftSpace + x + 8,
-            y: 10,
-            fill: color,
-            fontSize: 12,
-            fontWeight: 600,
-            children: todayLabel
-          }
-        )
-      ] });
-    }, [
-      additionalLeftSpace,
-      columnWidth,
-      ganttFullHeight,
-      isUnknownDates,
-      rtl,
-      startDate,
-      viewMode,
-      showTodayLine,
-      todayColor,
-      todayLabel
-    ]);
+      );
+    }, [isUnknownDates, showTodayLine, todayColor, todayLabel, lineProps]);
     const dataDateElement = React.useMemo(() => {
       if (!showDataDateLine || !dataDate) {
         return null;
       }
-      const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
-      const extraMultiplier = () => {
-        switch (viewMode) {
-          case ViewMode.Week: {
-            const percent = dataDate.getDay() / 7;
-            return 1 + percent * 0.2;
-          }
-          case ViewMode.Month: {
-            const dayInMonth = dataDate.getDate();
-            const maxDaysInMonth = getDaysInMonth(
-              dataDate.getMonth(),
-              dataDate.getFullYear()
-            );
-            const percent = dayInMonth / maxDaysInMonth;
-            return 1 + percent * 0.5;
-          }
-          case ViewMode.Year: {
-            const percent = dataDate.getMonth() / 12;
-            return 1 + percent * 0.5;
-          }
-          default:
-            return 1;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DateLine,
+        {
+          config: {
+            date: dataDate,
+            color: dataDateColor || "#ff6600",
+            label: dataDateLabel
+          },
+          ...lineProps
+        }
+      );
+    }, [showDataDateLine, dataDate, dataDateColor, dataDateLabel, lineProps]);
+    const projectStartElement = React.useMemo(() => {
+      if (!showProjectStartLine || !projectStartDate) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DateLine,
+        {
+          config: {
+            date: projectStartDate,
+            color: projectStartColor || "#4caf50",
+            label: projectStartLabel
+          },
+          ...lineProps
+        }
+      );
+    }, [
+      showProjectStartLine,
+      projectStartDate,
+      projectStartColor,
+      projectStartLabel,
+      lineProps
+    ]);
+    const projectEndElement = React.useMemo(() => {
+      if (!showProjectEndLine || !projectEndDate) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DateLine,
+        {
+          config: {
+            date: projectEndDate,
+            color: projectEndColor || "#f44336",
+            label: projectEndLabel
+          },
+          ...lineProps
         }
-      };
-      const tickX = dataIndex * columnWidth * extraMultiplier();
-      const x = rtl ? tickX + columnWidth : tickX;
-      const color = dataDateColor || "var(--gantt-calendar-today-color)";
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
-          {
-            x: additionalLeftSpace + x,
-            y: 0,
-            width: 2,
-            height: ganttFullHeight,
-            fill: color,
-            opacity: 0.9
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
-          {
-            className: styles$d.ganttTodayCircle,
-            cx: x + 1,
-            cy: 6,
-            r: 6,
-            fill: color
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: additionalLeftSpace + x + 8,
-            y: 10,
-            fill: color,
-            fontSize: 12,
-            fontWeight: 600,
-            children: dataDateLabel || "Data Date"
-          }
-        )
-      ] });
+      );
     }, [
-      additionalLeftSpace,
-      columnWidth,
-      ganttFullHeight,
-      rtl,
-      startDate,
-      viewMode,
-      showDataDateLine,
-      dataDate,
-      dataDateColor,
-      dataDateLabel
+      showProjectEndLine,
+      projectEndDate,
+      projectEndColor,
+      projectEndLabel,
+      lineProps
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
+      projectStartElement,
+      projectEndElement,
       dataDateElement,
       todayElement
     ] });
@@ -12355,231 +12577,6 @@
       }
     );
   };
-  const getDateByOffset = (startDate, offset2, viewMode) => {
-    switch (viewMode) {
-      case ViewMode.Day:
-        return addDays(startDate, offset2);
-      case ViewMode.HalfDay:
-        return addHours(startDate, offset2 * 12);
-      case ViewMode.QuarterDay:
-        return addHours(startDate, offset2 * 6);
-      case ViewMode.Hour:
-        return addHours(startDate, offset2);
-      case ViewMode.Month:
-        return addMonths(startDate, offset2);
-      case ViewMode.Week:
-        return addWeeks(startDate, offset2);
-      case ViewMode.Year:
-        return addYears(startDate, offset2);
-      default:
-        throw new Error("Unknown view mode");
-    }
-  };
-  const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
-    const index2 = getDatesDiff(xDate, startDate, viewMode);
-    const currentDate = getDateByOffset(startDate, index2, viewMode);
-    const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
-    const remainderMillis = xDate.getTime() - currentDate.getTime();
-    const intervalDuration = nextDate.getTime() - currentDate.getTime();
-    const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
-    const result = index2 * columnWidth + percentOfInterval * columnWidth;
-    return isNaN(result) || !isFinite(result) ? 0 : result;
-  };
-  const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
-    const index2 = getDatesDiff(xDate, startDate, viewMode);
-    const currentDate = getDateByOffset(startDate, index2, viewMode);
-    const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
-    const remainderMillis = xDate.getTime() - currentDate.getTime();
-    const intervalDuration = nextDate.getTime() - currentDate.getTime();
-    const percentOfInterval = intervalDuration === 0 ? 0 : remainderMillis / intervalDuration;
-    const result = index2 * columnWidth + percentOfInterval * columnWidth;
-    return isNaN(result) || !isFinite(result) ? 0 : result;
-  };
-  const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
-    const safeTaskX1 = isNaN(taskX1) || !isFinite(taskX1) ? 0 : taskX1;
-    const safeTaskX2 = isNaN(taskX2) || !isFinite(taskX2) ? 0 : taskX2;
-    const safeProgress = isNaN(progress) || !isFinite(progress) ? 0 : progress;
-    const progressWidth = Math.max(
-      (safeTaskX2 - safeTaskX1) * safeProgress * 0.01,
-      0
-    );
-    let progressX;
-    if (rtl) {
-      progressX = safeTaskX2 - progressWidth;
-    } else {
-      progressX = safeTaskX1;
-    }
-    return [progressWidth, progressX];
-  };
-  const getProgressPoint = (progressX, taskY, taskHeight) => {
-    const point = [
-      progressX - 5,
-      taskY + taskHeight,
-      progressX + 5,
-      taskY + taskHeight,
-      progressX,
-      taskY + taskHeight - 8.66
-    ];
-    return point.join(",");
-  };
-  const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
-    const safeX = isNaN(x) || !isFinite(x) ? 0 : x;
-    const safeTaskX = isNaN(taskX) || !isFinite(taskX) ? 0 : taskX;
-    const safeXStep = isNaN(xStep) || !isFinite(xStep) || xStep === 0 ? 1 : xStep;
-    const safeTimeStep = isNaN(timeStep) || !isFinite(timeStep) ? 0 : timeStep;
-    let newDate = new Date(
-      (safeX - safeTaskX) / safeXStep * safeTimeStep + taskDate.getTime()
-    );
-    newDate = new Date(
-      newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
-    );
-    return newDate;
-  };
-  const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
-    let result;
-    switch (selectedTask.type) {
-      case "milestone":
-        result = handleTaskBySVGMouseEventForMilestone(
-          action,
-          selectedTask,
-          initialCoordinates,
-          coordinates,
-          xStep,
-          timeStep
-        );
-        break;
-      default:
-        result = handleTaskBySVGMouseEventForBar(
-          action,
-          selectedTask,
-          initialCoordinates,
-          coordinates,
-          xStep,
-          timeStep,
-          rtl
-        );
-        break;
-    }
-    return result;
-  };
-  const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
-    const changedTask = { ...selectedTask };
-    let isChanged = false;
-    switch (action) {
-      case "progress":
-        isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
-        if (isChanged) {
-          changedTask.progress = Math.round(
-            coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
-          );
-        }
-        break;
-      case "start": {
-        isChanged = initialCoordinates.x1 !== coordinates.x1;
-        if (isChanged) {
-          if (rtl) {
-            changedTask.end = dateByX(
-              coordinates.x1,
-              initialCoordinates.x1,
-              selectedTask.end,
-              xStep,
-              timeStep
-            );
-          } else {
-            changedTask.start = dateByX(
-              coordinates.x1,
-              initialCoordinates.x1,
-              selectedTask.start,
-              xStep,
-              timeStep
-            );
-          }
-        }
-        break;
-      }
-      case "end": {
-        isChanged = initialCoordinates.x2 !== coordinates.x2;
-        if (isChanged) {
-          if (rtl) {
-            changedTask.start = dateByX(
-              coordinates.x2,
-              initialCoordinates.x2,
-              selectedTask.start,
-              xStep,
-              timeStep
-            );
-          } else {
-            changedTask.end = dateByX(
-              coordinates.x2,
-              initialCoordinates.x2,
-              selectedTask.end,
-              xStep,
-              timeStep
-            );
-          }
-        }
-        break;
-      }
-      case "move": {
-        isChanged = initialCoordinates.x1 !== coordinates.x1;
-        if (isChanged) {
-          if (rtl) {
-            changedTask.end = dateByX(
-              coordinates.x1,
-              initialCoordinates.x1,
-              selectedTask.end,
-              xStep,
-              timeStep
-            );
-            changedTask.start = dateByX(
-              coordinates.x2,
-              initialCoordinates.x2,
-              selectedTask.start,
-              xStep,
-              timeStep
-            );
-          } else {
-            changedTask.start = dateByX(
-              coordinates.x1,
-              initialCoordinates.x1,
-              selectedTask.start,
-              xStep,
-              timeStep
-            );
-            changedTask.end = dateByX(
-              coordinates.x2,
-              initialCoordinates.x2,
-              selectedTask.end,
-              xStep,
-              timeStep
-            );
-          }
-        }
-        break;
-      }
-    }
-    return { isChanged, changedTask };
-  };
-  const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
-    const changedTask = { ...selectedTask };
-    const isChanged = coordinates.x1 !== initialCoordinates.x1;
-    if (isChanged) {
-      switch (action) {
-        case "move": {
-          changedTask.start = dateByX(
-            coordinates.x1,
-            initialCoordinates.x1,
-            selectedTask.start,
-            xStep,
-            timeStep
-          );
-          changedTask.end = changedTask.start;
-          break;
-        }
-      }
-    }
-    return { isChanged, changedTask };
-  };
   const barWrapper = "_barWrapper_5jhkr_1";
   const barHandle = "_barHandle_5jhkr_11";
   const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
@@ -19995,11 +19992,19 @@
       rowHeight,
       showTodayLine = true,
       showDataDateLine = false,
+      showProjectStartLine = false,
+      showProjectEndLine = false,
       dataDate = null,
+      projectStartDate = null,
+      projectEndDate = null,
       todayColor,
       dataDateColor,
+      projectStartColor,
+      projectEndColor,
       todayLabel = "Today",
       dataDateLabel = "Data Date",
+      projectStartLabel = "Project Start",
+      projectEndLabel = "Project End",
       showProgress = true,
       hideProjectProgress = false,
       progressColor,
@@ -21428,11 +21433,19 @@
         viewMode,
         showTodayLine,
         showDataDateLine,
+        showProjectStartLine,
+        showProjectEndLine,
         dataDate,
+        projectStartDate,
+        projectEndDate,
         todayColor,
         dataDateColor,
+        projectStartColor,
+        projectEndColor,
         todayLabel,
-        dataDateLabel
+        dataDateLabel,
+        projectStartLabel,
+        projectEndLabel
       }),
       [
         additionalLeftSpace,
@@ -21444,11 +21457,19 @@
         viewMode,
         showTodayLine,
         showDataDateLine,
+        showProjectStartLine,
+        showProjectEndLine,
         dataDate,
+        projectStartDate,
+        projectEndDate,
         todayColor,
         dataDateColor,
+        projectStartColor,
+        projectEndColor,
         todayLabel,
-        dataDateLabel
+        dataDateLabel,
+        projectStartLabel,
+        projectEndLabel
       ]
     );
     const calendarProps = React.useMemo(