gantt-task-react-v 1.6.17 → 1.6.19

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

@@ -10283,10 +10283,33 @@ function formatForInput(value, editType) {
     return "";
   if (editType === "date") {
     if (value instanceof Date) {
-      return value.toISOString().slice(0, 10);
+      return Number.isNaN(value.getTime()) ? "" : value.toISOString().slice(0, 10);
     }
-    if (typeof value === "string")
+    if (typeof value === "number") {
+      const d = new Date(value);
+      return Number.isNaN(d.getTime()) ? "" : d.toISOString().slice(0, 10);
+    }
+    if (typeof value === "string") {
+      const d = new Date(value);
+      if (!Number.isNaN(d.getTime())) {
+        return d.toISOString().slice(0, 10);
+      }
       return value.slice(0, 10);
+    }
+    return "";
+  }
+  if (editType === "number") {
+    if (typeof value === "number") {
+      return Number.isNaN(value) ? "" : String(value);
+    }
+    if (typeof value === "string") {
+      const n = Number(value);
+      return Number.isNaN(n) ? value : String(n);
+    }
+    return String(value);
+  }
+  if (editType === "select") {
+    return String(value);
   }
   return String(value);
 }
@@ -10498,9 +10521,26 @@ const TaskListTableRowInner = forwardRef(
               const t = columnData.task;
               if (c.getValueFromTask)
                 return c.getValueFromTask(t);
-              if (t.type !== "empty" && t.payload && c.id in t.payload)
-                return t.payload[c.id];
-              return t[c.id];
+              if (t.type !== "empty" && t.payload) {
+                if (c.id in t.payload)
+                  return t.payload[c.id];
+              }
+              if (c.id in t)
+                return t[c.id];
+              if (t.type !== "empty") {
+                const task2 = t;
+                const aliasMap = {
+                  startDate: task2.start,
+                  finishDate: task2.end,
+                  endDate: task2.end,
+                  duration: task2.end && task2.start ? Math.round(
+                    (task2.end.getTime() - task2.start.getTime()) / (1e3 * 60 * 60 * 24)
+                  ) : void 0
+                };
+                if (c.id in aliasMap)
+                  return aliasMap[c.id];
+              }
+              return void 0;
             };
             const handleStartEdit = () => {
               if (col.editable && onTaskInlineEdit) {
@@ -11340,322 +11380,544 @@ const styles$d = {
   ganttToday,
   ganttTodayCircle
 };
-const GanttTodayInner = ({
-  additionalLeftSpace,
-  distances: { columnWidth },
-  ganttFullHeight,
-  isUnknownDates,
-  rtl,
-  startDate,
-  viewMode,
-  showTodayLine = true,
-  showDataDateLine = false,
-  dataDate = null,
-  todayColor = null,
-  dataDateColor = null,
-  todayLabel = "Today",
-  dataDateLabel = "Data Date"
-}) => {
-  const todayElement = 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;
-      }
-    };
-    const tickX = todayIndex * columnWidth * extraMultiplier();
-    const x = rtl ? tickX + columnWidth : tickX;
-    const color = todayColor || "var(--gantt-calendar-today-color)";
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: additionalLeftSpace + x,
-          y: 0,
-          width: 2,
-          height: ganttFullHeight,
-          fill: color
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: styles$d.ganttTodayCircle,
-          cx: x + 1,
-          cy: 6,
-          r: 6,
-          fill: color
-        }
-      ),
-      /* @__PURE__ */ 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
-  ]);
-  const dataDateElement = 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;
-      }
-    };
-    const tickX = dataIndex * columnWidth * extraMultiplier();
-    const x = rtl ? tickX + columnWidth : tickX;
-    const color = dataDateColor || "var(--gantt-calendar-today-color)";
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: additionalLeftSpace + x,
-          y: 0,
-          width: 2,
-          height: ganttFullHeight,
-          fill: color,
-          opacity: 0.9
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: styles$d.ganttTodayCircle,
-          cx: x + 1,
-          cy: 6,
-          r: 6,
-          fill: color
-        }
-      ),
-      /* @__PURE__ */ 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
-  ]);
-  return /* @__PURE__ */ jsxs("g", { className: "today", children: [
-    dataDateElement,
-    todayElement
-  ] });
-};
-const GanttToday = memo(GanttTodayInner);
-const calendarBottomText = "_calendarBottomText_15t8b_1";
-const calendarTopTick = "_calendarTopTick_15t8b_25";
-const calendarTopText = "_calendarTopText_15t8b_35";
-const calendarHeader = "_calendarHeader_15t8b_61";
-const calendar = "_calendar_15t8b_1";
-const calendarDragging$1 = "_calendarDragging_15t8b_85";
-const styles$c = {
-  calendarBottomText,
-  calendarTopTick,
-  calendarTopText,
-  calendarHeader,
-  calendar,
-  calendarDragging: calendarDragging$1
-};
-const TopPartOfCalendar = ({
-  value,
-  x1Line,
-  y1Line,
-  y2Line,
-  xText,
-  yText,
-  language
-}) => {
-  const { t, i18n } = useTranslation();
-  useEffect(() => {
-    if (language) {
-      i18n.changeLanguage(language);
-    }
-  }, []);
-  return /* @__PURE__ */ jsxs("g", { className: "calendarTop", children: [
-    /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: x1Line,
-        y1: y1Line,
-        x2: x1Line,
-        y2: y2Line,
-        className: styles$c.calendarTopTick
-      }
-    ),
-    value !== null && /* @__PURE__ */ jsx("text", { y: yText - 4, x: xText, className: styles$c.calendarTopText, children: value.toString().split(",")[1] ? t(value.toString().split(",")[0]) + "," + value.toString().split(",")[1] : value.toString().length >= 3 ? t(value.toString()) : value })
-  ] });
-};
-const defaultRenderBottomHeader = (date, viewMode, dateSetup, index2, isUnknownDates) => {
-  if (isUnknownDates) {
-    const {
-      dateLocale: { formatDistance: formatDistance2 },
-      preStepsCount
-    } = dateSetup;
-    const offsetFromStart = index2 - preStepsCount;
-    if (offsetFromStart === 0) {
-      return "0";
-    }
-    let value = "";
-    if (!formatDistance2) {
-      value = `${offsetFromStart}`;
-    } else {
-      switch (viewMode) {
-        case ViewMode.Year:
-          value = formatDistance2("xYears", offsetFromStart);
-          break;
-        case ViewMode.Month:
-          value = formatDistance2("xMonths", offsetFromStart);
-          break;
-        case ViewMode.Week:
-          value = formatDistance2("xWeeks", offsetFromStart);
-          break;
-        case ViewMode.Day:
-          value = formatDistance2("xDays", offsetFromStart);
-          break;
-        case ViewMode.QuarterDay:
-          value = formatDistance2("xHours", offsetFromStart * 6);
-          break;
-        case ViewMode.HalfDay:
-          value = formatDistance2("xHours", offsetFromStart * 12);
-          break;
-        case ViewMode.Hour:
-          value = formatDistance2("xHours", offsetFromStart);
-          break;
-        default:
-          throw new Error("Unknown viewMode");
-      }
-    }
-    if (offsetFromStart > 0) {
-      return `+${value}`;
-    }
-    return value;
-  }
+const getDateByOffset = (startDate, offset2, viewMode) => {
   switch (viewMode) {
-    case ViewMode.Year:
-      return date.getFullYear();
-    case ViewMode.Month:
-      try {
-        return format(date, dateSetup.dateFormats.monthBottomHeaderFormat, {
-          locale: dateSetup.dateLocale
-        });
-      } catch (e) {
-        return date.toLocaleString("default", { month: "long" });
-      }
-    case ViewMode.Week:
-      return dateSetup.dateFormats.weekBottomHeader(
-        date,
-        getWeekNumberISO8601(date),
-        dateSetup.dateLocale
-      );
     case ViewMode.Day:
-      try {
-        return format(date, dateSetup.dateFormats.dayBottomHeaderFormat, {
-          locale: dateSetup.dateLocale
-        });
-      } catch (e) {
-        return String(date.getDate());
-      }
-    case ViewMode.QuarterDay:
+      return addDays(startDate, offset2);
     case ViewMode.HalfDay:
+      return addHours(startDate, offset2 * 12);
+    case ViewMode.QuarterDay:
+      return addHours(startDate, offset2 * 6);
     case ViewMode.Hour:
-      try {
-        return format(date, dateSetup.dateFormats.hourBottomHeaderFormat, {
-          locale: dateSetup.dateLocale
-        });
-      } catch (e) {
-        return String(date.getDate());
-      }
+      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 viewMode");
+      throw new Error("Unknown view mode");
   }
 };
-const getDayText = (date, dateSetup) => {
-  try {
-    return format(date, dateSetup.dateFormats.dayTopHeaderFormat, {
-      locale: dateSetup.dateLocale
-    });
-  } catch (e) {
-    return String(date.getDate());
-  }
+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 getMonthText = (date, dateSetup) => {
-  try {
-    return format(date, dateSetup.dateFormats.monthTopHeaderFormat, {
-      locale: dateSetup.dateLocale
+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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: absX,
+        y: 0,
+        width: 2,
+        height: ganttFullHeight,
+        fill: config.color,
+        strokeDasharray: config.dashArray
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: styles$d.ganttTodayCircle,
+        cx: absX + 1,
+        cy: 6,
+        r: 6,
+        fill: config.color
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: absX + 10,
+        y: 10,
+        fill: config.color,
+        fontSize: 12,
+        fontWeight: 600,
+        children: config.label
+      }
+    )
+  ] });
+};
+const GanttTodayInner = ({
+  additionalLeftSpace,
+  distances: { columnWidth },
+  ganttFullHeight,
+  isUnknownDates,
+  rtl,
+  startDate,
+  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",
+  projectStartLabel = "Project Start",
+  projectEndLabel = "Project End"
+}) => {
+  const lineProps = useMemo(
+    () => ({
+      additionalLeftSpace,
+      startDate,
+      viewMode,
+      columnWidth,
+      rtl,
+      ganttFullHeight
+    }),
+    [
+      additionalLeftSpace,
+      startDate,
+      viewMode,
+      columnWidth,
+      rtl,
+      ganttFullHeight
+    ]
+  );
+  const todayElement = useMemo(() => {
+    if (isUnknownDates || !showTodayLine) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      DateLine,
+      {
+        config: {
+          date: /* @__PURE__ */ new Date(),
+          color: todayColor || "var(--gantt-calendar-today-color)",
+          label: todayLabel
+        },
+        ...lineProps
+      }
+    );
+  }, [isUnknownDates, showTodayLine, todayColor, todayLabel, lineProps]);
+  const dataDateElement = useMemo(() => {
+    if (!showDataDateLine || !dataDate) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      DateLine,
+      {
+        config: {
+          date: dataDate,
+          color: dataDateColor || "#ff6600",
+          label: dataDateLabel
+        },
+        ...lineProps
+      }
+    );
+  }, [showDataDateLine, dataDate, dataDateColor, dataDateLabel, lineProps]);
+  const projectStartElement = useMemo(() => {
+    if (!showProjectStartLine || !projectStartDate) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      DateLine,
+      {
+        config: {
+          date: projectStartDate,
+          color: projectStartColor || "#4caf50",
+          label: projectStartLabel
+        },
+        ...lineProps
+      }
+    );
+  }, [
+    showProjectStartLine,
+    projectStartDate,
+    projectStartColor,
+    projectStartLabel,
+    lineProps
+  ]);
+  const projectEndElement = useMemo(() => {
+    if (!showProjectEndLine || !projectEndDate) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      DateLine,
+      {
+        config: {
+          date: projectEndDate,
+          color: projectEndColor || "#f44336",
+          label: projectEndLabel
+        },
+        ...lineProps
+      }
+    );
+  }, [
+    showProjectEndLine,
+    projectEndDate,
+    projectEndColor,
+    projectEndLabel,
+    lineProps
+  ]);
+  return /* @__PURE__ */ jsxs("g", { className: "today", children: [
+    projectStartElement,
+    projectEndElement,
+    dataDateElement,
+    todayElement
+  ] });
+};
+const GanttToday = memo(GanttTodayInner);
+const calendarBottomText = "_calendarBottomText_15t8b_1";
+const calendarTopTick = "_calendarTopTick_15t8b_25";
+const calendarTopText = "_calendarTopText_15t8b_35";
+const calendarHeader = "_calendarHeader_15t8b_61";
+const calendar = "_calendar_15t8b_1";
+const calendarDragging$1 = "_calendarDragging_15t8b_85";
+const styles$c = {
+  calendarBottomText,
+  calendarTopTick,
+  calendarTopText,
+  calendarHeader,
+  calendar,
+  calendarDragging: calendarDragging$1
+};
+const TopPartOfCalendar = ({
+  value,
+  x1Line,
+  y1Line,
+  y2Line,
+  xText,
+  yText,
+  language
+}) => {
+  const { t, i18n } = useTranslation();
+  useEffect(() => {
+    if (language) {
+      i18n.changeLanguage(language);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("g", { className: "calendarTop", children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: x1Line,
+        y1: y1Line,
+        x2: x1Line,
+        y2: y2Line,
+        className: styles$c.calendarTopTick
+      }
+    ),
+    value !== null && /* @__PURE__ */ jsx("text", { y: yText - 4, x: xText, className: styles$c.calendarTopText, children: value.toString().split(",")[1] ? t(value.toString().split(",")[0]) + "," + value.toString().split(",")[1] : value.toString().length >= 3 ? t(value.toString()) : value })
+  ] });
+};
+const defaultRenderBottomHeader = (date, viewMode, dateSetup, index2, isUnknownDates) => {
+  if (isUnknownDates) {
+    const {
+      dateLocale: { formatDistance: formatDistance2 },
+      preStepsCount
+    } = dateSetup;
+    const offsetFromStart = index2 - preStepsCount;
+    if (offsetFromStart === 0) {
+      return "0";
+    }
+    let value = "";
+    if (!formatDistance2) {
+      value = `${offsetFromStart}`;
+    } else {
+      switch (viewMode) {
+        case ViewMode.Year:
+          value = formatDistance2("xYears", offsetFromStart);
+          break;
+        case ViewMode.Month:
+          value = formatDistance2("xMonths", offsetFromStart);
+          break;
+        case ViewMode.Week:
+          value = formatDistance2("xWeeks", offsetFromStart);
+          break;
+        case ViewMode.Day:
+          value = formatDistance2("xDays", offsetFromStart);
+          break;
+        case ViewMode.QuarterDay:
+          value = formatDistance2("xHours", offsetFromStart * 6);
+          break;
+        case ViewMode.HalfDay:
+          value = formatDistance2("xHours", offsetFromStart * 12);
+          break;
+        case ViewMode.Hour:
+          value = formatDistance2("xHours", offsetFromStart);
+          break;
+        default:
+          throw new Error("Unknown viewMode");
+      }
+    }
+    if (offsetFromStart > 0) {
+      return `+${value}`;
+    }
+    return value;
+  }
+  switch (viewMode) {
+    case ViewMode.Year:
+      return date.getFullYear();
+    case ViewMode.Month:
+      try {
+        return format(date, dateSetup.dateFormats.monthBottomHeaderFormat, {
+          locale: dateSetup.dateLocale
+        });
+      } catch (e) {
+        return date.toLocaleString("default", { month: "long" });
+      }
+    case ViewMode.Week:
+      return dateSetup.dateFormats.weekBottomHeader(
+        date,
+        getWeekNumberISO8601(date),
+        dateSetup.dateLocale
+      );
+    case ViewMode.Day:
+      try {
+        return format(date, dateSetup.dateFormats.dayBottomHeaderFormat, {
+          locale: dateSetup.dateLocale
+        });
+      } catch (e) {
+        return String(date.getDate());
+      }
+    case ViewMode.QuarterDay:
+    case ViewMode.HalfDay:
+    case ViewMode.Hour:
+      try {
+        return format(date, dateSetup.dateFormats.hourBottomHeaderFormat, {
+          locale: dateSetup.dateLocale
+        });
+      } catch (e) {
+        return String(date.getDate());
+      }
+    default:
+      throw new Error("Unknown viewMode");
+  }
+};
+const getDayText = (date, dateSetup) => {
+  try {
+    return format(date, dateSetup.dateFormats.dayTopHeaderFormat, {
+      locale: dateSetup.dateLocale
+    });
+  } catch (e) {
+    return String(date.getDate());
+  }
+};
+const getMonthText = (date, dateSetup) => {
+  try {
+    return format(date, dateSetup.dateFormats.monthTopHeaderFormat, {
+      locale: dateSetup.dateLocale
     });
   } catch (e) {
     return date.toLocaleString("default", { month: "long" });
@@ -12298,231 +12560,6 @@ const RelationLine = ({
     }
   );
 };
-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";
@@ -19938,11 +19975,19 @@ const Gantt = (props) => {
     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,
@@ -21371,11 +21416,19 @@ const Gantt = (props) => {
       viewMode,
       showTodayLine,
       showDataDateLine,
+      showProjectStartLine,
+      showProjectEndLine,
       dataDate,
+      projectStartDate,
+      projectEndDate,
       todayColor,
       dataDateColor,
+      projectStartColor,
+      projectEndColor,
       todayLabel,
-      dataDateLabel
+      dataDateLabel,
+      projectStartLabel,
+      projectEndLabel
     }),
     [
       additionalLeftSpace,
@@ -21387,11 +21440,19 @@ const Gantt = (props) => {
       viewMode,
       showTodayLine,
       showDataDateLine,
+      showProjectStartLine,
+      showProjectEndLine,
       dataDate,
+      projectStartDate,
+      projectEndDate,
       todayColor,
       dataDateColor,
+      projectStartColor,
+      projectEndColor,
       todayLabel,
-      dataDateLabel
+      dataDateLabel,
+      projectStartLabel,
+      projectEndLabel
     ]
   );
   const calendarProps = useMemo(