preStepsCount set

src/components/gantt/gantt.tsx

@@ -20,9 +20,9 @@ import { BarTask } from "../../types/bar-task";
 import { convertToBarTasks } from "../../helpers/bar-helper";
 import { GanttEvent } from "../../types/gantt-task-actions";
 import { DateSetup } from "../../types/date-setup";
-import styles from "./gantt.module.css";
 import { HorizontalScroll } from "../other/horizontal-scroll";
 import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper";
+import styles from "./gantt.module.css";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -32,6 +32,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   rowHeight = 50,
   ganttHeight = 0,
   viewMode = ViewMode.Day,
+  preStepsCount = 1,
   locale = "en-GB",
   barFill = 60,
   barCornerRadius = 3,
@@ -68,7 +69,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
   const [dateSetup, setDateSetup] = useState<DateSetup>(() => {
-    const [startDate, endDate] = ganttDateRange(tasks, viewMode);
+    const [startDate, endDate] = ganttDateRange(tasks, viewMode, preStepsCount);
     return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
   });
   const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(
@@ -106,7 +107,11 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
       filteredTasks = tasks;
     }
     filteredTasks = filteredTasks.sort(sortTasks);
-    const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode);
+    const [startDate, endDate] = ganttDateRange(
+      filteredTasks,
+      viewMode,
+      preStepsCount
+    );
     let newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
       newDates = newDates.reverse();
@@ -140,6 +145,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   }, [
     tasks,
     viewMode,
+    preStepsCount,
     rowHeight,
     barCornerRadius,
     columnWidth,

src/components/other/horizontal-scroll.module.css

@@ -6,7 +6,7 @@
   /*iPad*/
   height: 1.1rem;
 }
-.scrollWrapper::-webkit-scrollbar {
+/*.scrollWrapper::-webkit-scrollbar {
   width: 1.1rem;
   height: 1.1rem;
 }
@@ -27,10 +27,7 @@
   background-clip: padding-box;
 }
 @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
-  .scrollWrapper {
-    -webkit-overflow-scrolling: touch;
-  }
-}
+}*/
 .scroll {
   height: 1px;
 }

src/helpers/bar-helper.ts

@@ -246,16 +246,13 @@ const convertToMilestone = (
   };
 };
 
-const taskXCoordinate = (
-  xDate: Date,
-  dates: Date[],
-  columnWidth: number
-) => {
+const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => {
   const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1;
 
   const remainderMillis = xDate.getTime() - dates[index].getTime();
-  const percentOfInterval = remainderMillis / (dates[index + 1 ].getTime() - dates[index].getTime());
-  const x = index * columnWidth + (percentOfInterval * columnWidth);
+  const percentOfInterval =
+    remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
+  const x = index * columnWidth + percentOfInterval * columnWidth;
   return x;
 };
 const taskXCoordinateRTL = (

src/helpers/date-helper.ts

@@ -69,7 +69,11 @@ export const startOfDate = (date: Date, scale: DateHelperScales) => {
   return newDate;
 };
 
-export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
+export const ganttDateRange = (
+  tasks: Task[],
+  viewMode: ViewMode,
+  preStepsCount: number
+) => {
   let newStartDate: Date = tasks[0].start;
   let newEndDate: Date = tasks[0].start;
   for (const task of tasks) {
@@ -82,39 +86,43 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
   }
   switch (viewMode) {
     case ViewMode.Month:
-      newStartDate = addToDate(newStartDate, -1, "month");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
       newStartDate = startOfDate(newStartDate, "month");
       newEndDate = addToDate(newEndDate, 1, "year");
       newEndDate = startOfDate(newEndDate, "year");
       break;
     case ViewMode.Week:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(
+        getMonday(newStartDate),
+        -7 * preStepsCount,
+        "day"
+      );
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(getMonday(newStartDate), -7, "day");
       newEndDate = addToDate(newEndDate, 1.5, "month");
       break;
     case ViewMode.Day:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 19, "day");
       break;
     case ViewMode.QuarterDay:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
       break;
     case ViewMode.HalfDay:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
       break;
     case ViewMode.Hour:
       newStartDate = startOfDate(newStartDate, "hour");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "hour");
       newEndDate = addToDate(newEndDate, 1, "day");
       break;
   }

src/types/public-types.ts

@@ -75,6 +75,7 @@ export interface EventOption {
 export interface DisplayOption {
   viewMode?: ViewMode;
   viewDate?: Date;
+  preStepsCount?: number;
   /**
    * Specifies the month name language. Able formats: ISO 639-2, Java Locale
    */