110 support for minute viewmode

README.md

@@ -86,7 +86,7 @@ npm start
 
 | Parameter Name | Type    | Description                                                                                                 |
 | :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
-| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |
+| viewMode       | enum    | Specifies the time scale. Minute, Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |
 | viewDate       | date    | Specifies display date and time for display.                                                                |
 | preStepsCount  | number  | Specifies empty space before the fist task                                                                  |
 | locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                    |

src/components/calendar/calendar.tsx

@@ -355,6 +355,54 @@ export const Calendar: React.FC<CalendarProps> = ({
     return [topValues, bottomValues];
   };
 
+  const getCalendarValuesForMinute = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
+
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
+        minute: "numeric",
+      }).format(date);
+
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * (i + +rtl)}
+          className={styles.calendarBottomText}
+          fontFamily={fontFamily}
+        >
+          {bottomValue}
+        </text>
+      );
+      if (i !== 0 && date.getHours() !== dates[i - 1].getHours()) {
+        const displayDate = dates[i - 1];
+        const topValue = `${getLocalDayOfWeek(
+          displayDate,
+          locale,
+          "long"
+        )}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)} (${displayDate.getHours()}:00)`;
+        const topPosition = (date.getMinutes() - 60) / 2;
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + displayDate.getFullYear()}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={columnWidth * (i + topPosition)}
+            yText={topDefaultHeight * 0.9}
+          />
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
+
   let topValues: ReactChild[] = [];
   let bottomValues: ReactChild[] = [];
   switch (dateSetup.viewMode) {
@@ -377,6 +425,9 @@ export const Calendar: React.FC<CalendarProps> = ({
     case ViewMode.HalfDay:
       [topValues, bottomValues] = getCalendarValuesForPartOfDay();
       break;
+    case ViewMode.Minute:
+      [topValues, bottomValues] = getCalendarValuesForMinute();
+      break;
     case ViewMode.Hour:
       [topValues, bottomValues] = getCalendarValuesForHour();
   }

src/helpers/date-helper.ts

@@ -137,6 +137,12 @@ export const ganttDateRange = (
       newEndDate = startOfDate(newEndDate, "day");
       newEndDate = addToDate(newEndDate, 1, "day");
       break;
+    case ViewMode.Minute:
+      newStartDate = startOfDate(newStartDate, "minute");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "minute");
+      newEndDate = startOfDate(newEndDate, "hour");
+      newEndDate = addToDate(newEndDate, 1, "hour");
+      break;
   }
   return [newStartDate, newEndDate];
 };
@@ -174,6 +180,9 @@ export const seedDates = (
       case ViewMode.Hour:
         currentDate = addToDate(currentDate, 1, "hour");
         break;
+      case ViewMode.Minute:
+        currentDate = addToDate(currentDate, 1, "minute");
+        break;
     }
     dates.push(currentDate);
   }

src/types/public-types.ts

@@ -1,4 +1,5 @@
 export enum ViewMode {
+  Minute = "Minute",
   Hour = "Hour",
   QuarterDay = "Quarter Day",
   HalfDay = "Half Day",