hour mode, day of week, view date

.gitignore

@@ -20,3 +20,4 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json

README.md

@@ -76,7 +76,7 @@ npm start
 | onDateChange\*     | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
 | onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |
 | onExpanderClick\*  | onExpanderClick: (task: Task) => void;                                        | Specifies the function to be executed on the table expander click                       |
-| timeStep           | (task: Task) => number                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
+| timeStep           | number                                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
 
 \* Chart undoes operation if method return false or error. Parameter children returns one level deep records.
 

example/src/App.tsx

@@ -9,7 +9,7 @@ const App = () => {
   const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
   const [tasks, setTasks] = React.useState<Task[]>(initTasks());
   const [isChecked, setIsChecked] = React.useState(true);
-  let columnWidth = 60;
+  let columnWidth = 65;
   if (view === ViewMode.Month) {
     columnWidth = 300;
   } else if (view === ViewMode.Week) {

example/src/components/view-switcher.tsx

@@ -13,6 +13,12 @@ export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
 }) => {
   return (
     <div className="ViewContainer">
+      <button
+        className="Button"
+        onClick={() => onViewModeChange(ViewMode.Hour)}
+      >
+        Hour
+      </button>
       <button
         className="Button"
         onClick={() => onViewModeChange(ViewMode.QuarterDay)}

example/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

src/components/calendar/calendar.tsx

@@ -4,6 +4,7 @@ import { TopPartOfCalendar } from "./top-part-of-calendar";
 import {
   getCachedDateTimeFormat,
   getDaysInMonth,
+  getLocalDayOfWeek,
   getLocaleMonth,
   getWeekNumberISO8601,
 } from "../../helpers/date-helper";
@@ -131,7 +132,9 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = date.getDate().toString();
+      const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date
+        .getDate()
+        .toString()}`;
 
       bottomValues.push(
         <text
@@ -170,7 +173,7 @@ export const Calendar: React.FC<CalendarProps> = ({
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForOther = () => {
+  const getCalendarValuesForPartOfDay = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
     const ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
@@ -194,7 +197,11 @@ export const Calendar: React.FC<CalendarProps> = ({
         </text>
       );
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = `${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        const topValue = `${getLocalDayOfWeek(
+          date,
+          locale,
+          "short"
+        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         topValues.push(
           <TopPartOfCalendar
             key={topValue + date.getFullYear()}
@@ -212,6 +219,52 @@ export const Calendar: React.FC<CalendarProps> = ({
     return [topValues, bottomValues];
   };
 
+  const getCalendarValuesForHour = () => {
+    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, {
+        hour: "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.getDate() !== dates[i - 1].getDate()) {
+        const topValue = `${getLocalDayOfWeek(
+          date,
+          locale,
+          "long"
+        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        const topPosition = (date.getHours() - 24) / 2;
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + date.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) {
@@ -224,9 +277,12 @@ export const Calendar: React.FC<CalendarProps> = ({
     case ViewMode.Day:
       [topValues, bottomValues] = getCalendarValuesForDay();
       break;
-    default:
+    case ViewMode.QuarterDay:
-      [topValues, bottomValues] = getCalendarValuesForOther();
+    case ViewMode.HalfDay:
+      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
       break;
+    case ViewMode.Hour:
+      [topValues, bottomValues] = getCalendarValuesForHour();
   }
   return (
     <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>

src/components/gantt/gantt.tsx

@@ -47,6 +47,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   fontSize = "14px",
   arrowIndent = 20,
   todayColor = "rgba(252, 248, 227, 0.5)",
+  viewDate,
   TooltipContent = StandardTooltipContent,
   TaskListHeader = TaskListHeaderDefault,
   TaskListTable = TaskListTableDefault,
@@ -63,6 +64,9 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     const [startDate, endDate] = ganttDateRange(tasks, viewMode);
     return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
   });
+  const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(
+    undefined
+  );
 
   const [taskHeight, setTaskHeight] = useState((rowHeight * barFill) / 100);
   const [taskListWidth, setTaskListWidth] = useState(0);
@@ -145,6 +149,34 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onExpanderClick,
   ]);
 
+  useEffect(() => {
+    if (
+      viewMode === dateSetup.viewMode &&
+      ((viewDate && !currentViewDate) ||
+        (viewDate && currentViewDate?.valueOf() !== viewDate.valueOf()))
+    ) {
+      const dates = dateSetup.dates;
+      const index = dates.findIndex(
+        (d, i) =>
+          viewDate.valueOf() >= d.valueOf() &&
+          i + 1 !== dates.length &&
+          viewDate.valueOf() < dates[i + 1].valueOf()
+      );
+      if (index === -1) {
+        return;
+      }
+      setCurrentViewDate(viewDate);
+      setScrollX(columnWidth * index);
+    }
+  }, [
+    viewDate,
+    columnWidth,
+    dateSetup.dates,
+    viewMode,
+    currentViewDate,
+    setCurrentViewDate,
+  ]);
+
   useEffect(() => {
     const { changedTask, action } = ganttEvent;
     if (changedTask) {

src/components/task-list/task-list-table.tsx

@@ -3,10 +3,9 @@ import styles from "./task-list-table.module.css";
 import { Task } from "../../types/public-types";
 
 const localeDateStringCache = {};
-const toLocaleDateStringFactory = (locale: string) => (
+const toLocaleDateStringFactory =
-  date: Date,
+  (locale: string) =>
-  dateTimeOptions: Intl.DateTimeFormatOptions
+  (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => {
-) => {
     const key = date.toString();
     let lds = localeDateStringCache[key];
     if (!lds) {
@@ -14,7 +13,7 @@ const toLocaleDateStringFactory = (locale: string) => (
       localeDateStringCache[key] = lds;
     }
     return lds;
-};
+  };
 const dateTimeOptions: Intl.DateTimeFormatOptions = {
   weekday: "short",
   year: "numeric",
@@ -41,9 +40,10 @@ export const TaskListTableDefault: React.FC<{
   locale,
   onExpanderClick,
 }) => {
-  const toLocaleDateString = useMemo(() => toLocaleDateStringFactory(locale), [
+  const toLocaleDateString = useMemo(
-    locale,
+    () => toLocaleDateStringFactory(locale),
-  ]);
+    [locale]
+  );
 
   return (
     <div

src/helpers/date-helper.ts

@@ -25,7 +25,6 @@ export const getCachedDateTimeFormat = (
   return dtf;
 };
 
-
 export const addToDate = (
   date: Date,
   quantity: number,
@@ -112,6 +111,12 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
       newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
       break;
+    case ViewMode.Hour:
+      newStartDate = startOfDate(newStartDate, "hour");
+      newEndDate = startOfDate(newEndDate, "day");
+      newStartDate = addToDate(newStartDate, -1, "hour");
+      newEndDate = addToDate(newEndDate, 1, "day");
+      break;
   }
   return [newStartDate, newEndDate];
 };
@@ -140,6 +145,9 @@ export const seedDates = (
       case ViewMode.QuarterDay:
         currentDate = addToDate(currentDate, 6, "hour");
         break;
+      case ViewMode.Hour:
+        currentDate = addToDate(currentDate, 1, "hour");
+        break;
     }
     dates.push(currentDate);
   }
@@ -157,6 +165,21 @@ export const getLocaleMonth = (date: Date, locale: string) => {
   return bottomValue;
 };
 
+export const getLocalDayOfWeek = (
+  date: Date,
+  locale: string,
+  format?: "long" | "short" | "narrow" | undefined
+) => {
+  let bottomValue = getCachedDateTimeFormat(locale, {
+    weekday: format,
+  }).format(date);
+  bottomValue = bottomValue.replace(
+    bottomValue[0],
+    bottomValue[0].toLocaleUpperCase()
+  );
+  return bottomValue;
+};
+
 /**
  * Returns monday of current week
  * @param date date for modify
@@ -190,4 +213,3 @@ export const getWeekNumberISO8601 = (date: Date) => {
 export const getDaysInMonth = (month: number, year: number) => {
   return new Date(year, month + 1, 0).getDate();
 };
-

src/types/public-types.ts

@@ -1,4 +1,5 @@
 export enum ViewMode {
+  Hour = "Hour",
   QuarterDay = "Quarter Day",
   HalfDay = "Half Day",
   Day = "Day",
@@ -68,6 +69,7 @@ export interface EventOption {
 
 export interface DisplayOption {
   viewMode?: ViewMode;
+  viewDate?: Date;
   /**
    * Specifies the month name language. Able formats: ISO 639-2, Java Locale
    */