gantt-task-react-v 1.6.17 → 1.6.19

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

@@ -10300,10 +10300,33 @@
       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);
   }
@@ -10515,9 +10538,26 @@
                 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) {
@@ -11357,322 +11397,544 @@
     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 = 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;
-        }
-      };
-      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
-    ]);
-    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;
-        }
-      };
-      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
-    ]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
-      dataDateElement,
-      todayElement
-    ] });
-  };
-  const GanttToday = React.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();
-    React.useEffect(() => {
-      if (language) {
-        i18n.changeLanguage(language);
-      }
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "calendarTop", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "line",
-        {
-          x1: x1Line,
-          y1: y1Line,
-          x2: x1Line,
-          y2: y2Line,
-          className: styles$c.calendarTopTick
-        }
-      ),
-      value !== null && /* @__PURE__ */ jsxRuntime.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__ */ 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 },
+    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 = React.useMemo(
+      () => ({
+        additionalLeftSpace,
+        startDate,
+        viewMode,
+        columnWidth,
+        rtl,
+        ganttFullHeight
+      }),
+      [
+        additionalLeftSpace,
+        startDate,
+        viewMode,
+        columnWidth,
+        rtl,
+        ganttFullHeight
+      ]
+    );
+    const todayElement = React.useMemo(() => {
+      if (isUnknownDates || !showTodayLine) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DateLine,
+        {
+          config: {
+            date: /* @__PURE__ */ new Date(),
+            color: todayColor || "var(--gantt-calendar-today-color)",
+            label: todayLabel
+          },
+          ...lineProps
+        }
+      );
+    }, [isUnknownDates, showTodayLine, todayColor, todayLabel, lineProps]);
+    const dataDateElement = React.useMemo(() => {
+      if (!showDataDateLine || !dataDate) {
+        return null;
+      }
+      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
+        }
+      );
+    }, [
+      showProjectEndLine,
+      projectEndDate,
+      projectEndColor,
+      projectEndLabel,
+      lineProps
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
+      projectStartElement,
+      projectEndElement,
+      dataDateElement,
+      todayElement
+    ] });
+  };
+  const GanttToday = React.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();
+    React.useEffect(() => {
+      if (language) {
+        i18n.changeLanguage(language);
+      }
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "calendarTop", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: x1Line,
+          y1: y1Line,
+          x2: x1Line,
+          y2: y2Line,
+          className: styles$c.calendarTopTick
+        }
+      ),
+      value !== null && /* @__PURE__ */ jsxRuntime.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" });
@@ -12315,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";
@@ -19955,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,
@@ -21388,11 +21433,19 @@
         viewMode,
         showTodayLine,
         showDataDateLine,
+        showProjectStartLine,
+        showProjectEndLine,
         dataDate,
+        projectStartDate,
+        projectEndDate,
         todayColor,
         dataDateColor,
+        projectStartColor,
+        projectEndColor,
         todayLabel,
-        dataDateLabel
+        dataDateLabel,
+        projectStartLabel,
+        projectEndLabel
       }),
       [
         additionalLeftSpace,
@@ -21404,11 +21457,19 @@
         viewMode,
         showTodayLine,
         showDataDateLine,
+        showProjectStartLine,
+        showProjectEndLine,
         dataDate,
+        projectStartDate,
+        projectEndDate,
         todayColor,
         dataDateColor,
+        projectStartColor,
+        projectEndColor,
         todayLabel,
-        dataDateLabel
+        dataDateLabel,
+        projectStartLabel,
+        projectEndLabel
       ]
     );
     const calendarProps = React.useMemo(