gantt-task-react-powern 0.4.69 → 0.4.71

package/dist/components/grid/grid-body.d.ts

@@ -2,11 +2,13 @@ import React from "react";
 import { Task } from "../../types/public-types";
 export declare type GridBodyProps = {
     tasks: Task[];
+    scheduleType: string;
     dates: Date[];
     svgWidth: number;
     rowHeight: number;
     columnWidth: number;
     todayColor: string;
+    weekendColor: string;
     rtl: boolean;
 };
 export declare const GridBody: React.FC<GridBodyProps>;

package/dist/components/task-list/task-list-header.d.ts

@@ -4,4 +4,7 @@ export declare const TaskListHeaderDefault: React.FC<{
     rowWidth: string;
     fontFamily: string;
     fontSize: string;
+    scheduleType: string;
+    allSelected?: boolean;
+    onSelectAll?: (selected: boolean) => void;
 }>;

package/dist/components/task-list/task-list-table.d.ts

@@ -7,9 +7,12 @@ export declare const TaskListTableDefault: React.FC<{
     fontSize: string;
     locale: string;
     tasks: Task[];
+    scheduleType: string;
     leafTasks: Task[];
     selectedTaskId: string;
     setSelectedTask: (taskId: string) => void;
     onExpanderClick: (task: Task) => void;
+    selectedTasks?: string[];
+    onTaskSelect?: (taskId: string, selected: boolean) => void;
     taskLabelRenderer?: (Task: Task) => React.ReactNode;
 }>;

package/dist/components/task-list/task-list.d.ts

@@ -12,6 +12,7 @@ export declare type TaskListProps = {
     scrollY: number;
     locale: string;
     tasks: Task[];
+    scheduleType: string;
     leafTasks: Task[];
     taskListRef: React.RefObject<HTMLDivElement>;
     horizontalContainerClass?: string;
@@ -24,6 +25,9 @@ export declare type TaskListProps = {
         rowWidth: string;
         fontFamily: string;
         fontSize: string;
+        scheduleType: string;
+        allSelected?: boolean;
+        onSelectAll?: (selected: boolean) => void;
     }>;
     TaskListTable: React.FC<{
         rowHeight: number;
@@ -32,10 +36,13 @@ export declare type TaskListProps = {
         fontSize: string;
         locale: string;
         tasks: Task[];
+        scheduleType: string;
         leafTasks: Task[];
         selectedTaskId: string;
         setSelectedTask: (taskId: string) => void;
         onExpanderClick: (task: Task) => void;
+        selectedTasks?: string[];
+        onTaskSelect?: (taskId: string, selected: boolean) => void;
         taskLabelRenderer?: (Task: Task) => React.ReactNode;
     }>;
 } & EventOption;

package/dist/index.css

@@ -37,6 +37,23 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  background-color: #fff;
+}
+
+._GzvG4 {
+  display: table-row;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+._3Ykml {
+  display: table-row;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: #e6e4e4;
 }
 
 ._34SS0:nth-of-type(even) {
@@ -49,6 +66,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-bottom: #ebeff2 1px solid;
 }
 ._nI1Xw {
   display: flex;
@@ -152,6 +170,14 @@
   fill: #f5f5f5;
 }
 
+._2RRca {
+  fill: #fff;
+}
+
+._2RRca:nth-child(even) {
+  fill: #fff;
+}
+
 ._3rUKi {
   stroke: #ebeff2;
 }
@@ -160,7 +186,7 @@
   stroke: #e6e4e4;
 }
 ._2M-tt {
-  fill: #e6e4e4 !important; 
+  fill: #e6e4e4 !important;
 }
 
 ._9w8d5 {

package/dist/index.js

@@ -275,9 +275,6 @@ var getWeekNumberISO8601 = function getWeekNumberISO8601(date) {
     return weekNumber;
   }
 };
-var getDaysInMonth = function getDaysInMonth(month, year) {
-  return new Date(year, month + 1, 0).getDate();
-};
 
 var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
 
@@ -285,7 +282,10 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   var headerHeight = _ref.headerHeight,
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
-      rowWidth = _ref.rowWidth;
+      rowWidth = _ref.rowWidth,
+      scheduleType = _ref.scheduleType,
+      allSelected = _ref.allSelected,
+      onSelectAll = _ref.onSelectAll;
   return React__default.createElement("div", {
     className: styles.ganttTable,
     style: {
@@ -297,7 +297,19 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
     style: {
       height: headerHeight - 2
     }
-  }, React__default.createElement("div", {
+  }, onSelectAll && React__default.createElement("div", null, React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.3,
+      maxWidth: parseInt(rowWidth) * 0.3
+    }
+  }, React__default.createElement("input", {
+    type: "checkbox",
+    checked: allSelected,
+    onChange: function onChange(e) {
+      return onSelectAll(e.target.checked);
+    }
+  }))), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
       minWidth: parseInt(rowWidth) * 0.8,
@@ -336,7 +348,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   }), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
-      minWidth: parseInt(rowWidth) * 0.7
+      minWidth: parseInt(rowWidth) * 0.6
     },
     title: "Planned Start"
   }, "Planned Start"), React__default.createElement("div", {
@@ -348,13 +360,31 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   }), React__default.createElement("div", {
     className: styles.ganttTable_HeaderItem,
     style: {
-      minWidth: parseInt(rowWidth) * 0.7
+      minWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Planned End"
+  }, "Planned End"), scheduleType === "lookAhead" && React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6
+    },
+    title: "Planned Start"
+  }, "Actual Start"), scheduleType === "lookAhead" && React__default.createElement("div", {
+    className: styles.ganttTable_HeaderSeparator,
+    style: {
+      height: headerHeight * 0.5,
+      marginTop: headerHeight * 0.25
+    }
+  }), scheduleType === "lookAhead" && React__default.createElement("div", {
+    className: styles.ganttTable_HeaderItem,
+    style: {
+      minWidth: parseInt(rowWidth) * 0.6
     },
     title: "Planned End"
-  }, "Planned End")));
+  }, "Actual End")));
 };
 
-var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
+var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListLookAheadRow":"_GzvG4","taskListMilestoneRow":"_3Ykml","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
 
 var localeDateStringCache = {};
 
@@ -382,11 +412,15 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
   var rowHeight = _ref.rowHeight,
       rowWidth = _ref.rowWidth,
       tasks = _ref.tasks,
+      scheduleType = _ref.scheduleType,
       leafTasks = _ref.leafTasks,
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
       locale = _ref.locale,
       onExpanderClick = _ref.onExpanderClick,
+      _ref$selectedTasks = _ref.selectedTasks,
+      selectedTasks = _ref$selectedTasks === void 0 ? [] : _ref$selectedTasks,
+      onTaskSelect = _ref.onTaskSelect,
       _ref$taskLabelRendere = _ref.taskLabelRenderer,
       taskLabelRenderer = _ref$taskLabelRendere === void 0 ? function (t) {
     return " " + t.name;
@@ -416,13 +450,36 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }
 
+    var isSelected = selectedTasks.includes(t.id);
     return React__default.createElement("div", {
-      className: styles$1.taskListTableRow,
+      className: t.type === "milestone" ? styles$1.taskListMilestoneRow : scheduleType === "lookAhead" ? styles$1.taskListLookAheadRow : styles$1.taskListTableRow,
       style: {
         height: rowHeight
       },
       key: t.id + "row"
+    }, onTaskSelect && React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: parseInt(rowWidth) * 0.3,
+        maxWidth: parseInt(rowWidth) * 0.3
+      }
     }, React__default.createElement("div", {
+      className: styles$1.taskListText,
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        paddingLeft: "0",
+        paddingRight: "0"
+      }
+    }, React__default.createElement("input", {
+      type: "checkbox",
+      checked: isSelected,
+      onChange: function onChange(e) {
+        return onTaskSelect(t.id, e.target.checked);
+      }
+    }))), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: parseInt(rowWidth) * 0.8,
@@ -481,7 +538,23 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
-    }, "\xA0", toLocaleDateString(t.end, dateTimeOptions))));
+    }, "\xA0", toLocaleDateString(t.end, dateTimeOptions))), scheduleType === "lookAhead" && React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: parseInt(rowWidth) * 0.6,
+        maxWidth: parseInt(rowWidth) * 0.6
+      }
+    }, React__default.createElement("div", {
+      className: styles$1.taskListText
+    }, "\xA0", toLocaleDateString(t.actualStart, dateTimeOptions))), scheduleType === "lookAhead" && React__default.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: parseInt(rowWidth) * 0.6,
+        maxWidth: parseInt(rowWidth) * 0.6
+      }
+    }, React__default.createElement("div", {
+      className: styles$1.taskListText
+    }, "\xA0", toLocaleDateString(t.actualEnd, dateTimeOptions))));
   }));
 };
 
@@ -648,6 +721,7 @@ var TaskList = function TaskList(_ref) {
       rowHeight = _ref.rowHeight,
       scrollY = _ref.scrollY,
       tasks = _ref.tasks,
+      scheduleType = _ref.scheduleType,
       leafTasks = _ref.leafTasks,
       selectedTask = _ref.selectedTask,
       setSelectedTask = _ref.setSelectedTask,
@@ -658,18 +732,62 @@ var TaskList = function TaskList(_ref) {
       horizontalContainerClass = _ref.horizontalContainerClass,
       TaskListHeader = _ref.TaskListHeader,
       TaskListTable = _ref.TaskListTable,
-      taskLabelRenderer = _ref.taskLabelRenderer;
+      taskLabelRenderer = _ref.taskLabelRenderer,
+      onMultiSelect = _ref.onMultiSelect;
   var horizontalContainerRef = React.useRef(null);
+
+  var _useState = React.useState([]),
+      selectedTasks = _useState[0],
+      setSelectedTasks = _useState[1];
+
+  var prevSelectedTasksRef = React.useRef([]);
   React.useEffect(function () {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
   }, [scrollY]);
+  React.useEffect(function () {
+    if (onMultiSelect && JSON.stringify(prevSelectedTasksRef.current) !== JSON.stringify(selectedTasks)) {
+      var selectedTaskObjects = tasks.filter(function (task) {
+        return selectedTasks.includes(task.id);
+      });
+      prevSelectedTasksRef.current = [].concat(selectedTasks);
+      onMultiSelect(selectedTaskObjects);
+    }
+  }, [selectedTasks, tasks, onMultiSelect]);
+
+  var handleTaskSelect = function handleTaskSelect(taskId, selected) {
+    if (selected) {
+      setSelectedTasks(function (prev) {
+        return [].concat(prev, [taskId]);
+      });
+    } else {
+      setSelectedTasks(function (prev) {
+        return prev.filter(function (id) {
+          return id !== taskId;
+        });
+      });
+    }
+  };
+
+  var handleSelectAll = function handleSelectAll(selected) {
+    if (selected) {
+      setSelectedTasks(tasks.map(function (task) {
+        return task.id;
+      }));
+    } else {
+      setSelectedTasks([]);
+    }
+  };
+
   var headerProps = {
     headerHeight: headerHeight,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    rowWidth: rowWidth
+    rowWidth: rowWidth,
+    scheduleType: scheduleType,
+    allSelected: tasks.length > 0 && selectedTasks.length === tasks.length,
+    onSelectAll: onMultiSelect ? handleSelectAll : undefined
   };
   var selectedTaskId = selectedTask ? selectedTask.id : "";
   var tableProps = {
@@ -679,10 +797,13 @@ var TaskList = function TaskList(_ref) {
     fontSize: fontSize,
     tasks: tasks,
     leafTasks: leafTasks,
+    scheduleType: scheduleType,
     locale: locale,
     selectedTaskId: selectedTaskId,
     setSelectedTask: setSelectedTask,
     onExpanderClick: onExpanderClick,
+    selectedTasks: onMultiSelect ? selectedTasks : undefined,
+    onTaskSelect: onMultiSelect ? handleTaskSelect : undefined,
     taskLabelRenderer: taskLabelRenderer
   };
   return React__default.createElement("div", {
@@ -696,15 +817,17 @@ var TaskList = function TaskList(_ref) {
   }, React__default.createElement(TaskListTable, Object.assign({}, tableProps))));
 };
 
-var styles$4 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
+var styles$4 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
 
 var GridBody = function GridBody(_ref) {
   var tasks = _ref.tasks,
+      scheduleType = _ref.scheduleType,
       dates = _ref.dates,
       rowHeight = _ref.rowHeight,
       svgWidth = _ref.svgWidth,
       columnWidth = _ref.columnWidth,
       todayColor = _ref.todayColor,
+      weekendColor = _ref.weekendColor,
       rtl = _ref.rtl;
   var y = 0;
   var gridRows = [];
@@ -726,7 +849,7 @@ var GridBody = function GridBody(_ref) {
       y: y,
       width: svgWidth,
       height: rowHeight,
-      className: isDarkerRow ? styles$4.darkerGridRow : styles$4.gridRow
+      className: isDarkerRow ? styles$4.darkerGridRow : scheduleType === "lookAhead" ? styles$4.gridRowLookAhead : styles$4.gridRow
     }));
     rowLines.push(React__default.createElement("line", {
       key: "RowLine" + task.id,
@@ -743,6 +866,7 @@ var GridBody = function GridBody(_ref) {
   var tickX = 0;
   var ticks = [];
   var today = React__default.createElement("rect", null);
+  var weekend = [];
 
   for (var i = 0; i < dates.length; i++) {
     var date = dates[i];
@@ -765,6 +889,16 @@ var GridBody = function GridBody(_ref) {
       });
     }
 
+    if (date.getDay() === 6 || date.getDay() === 0) {
+      weekend.push(React__default.createElement("rect", {
+        x: tickX,
+        y: 0,
+        width: columnWidth,
+        height: y,
+        fill: weekendColor
+      }));
+    }
+
     if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
       today = React__default.createElement("rect", {
         x: tickX + columnWidth,
@@ -786,7 +920,9 @@ var GridBody = function GridBody(_ref) {
     className: "rowLines"
   }, rowLines), React__default.createElement("g", {
     className: "ticks"
-  }, ticks), React__default.createElement("g", {
+  }, ticks), scheduleType === "lookAhead" && React__default.createElement("g", {
+    className: "weekend"
+  }, weekend), React__default.createElement("g", {
     className: "today"
   }, today));
 };
@@ -1031,7 +1167,21 @@ var Calendar = function Calendar(_ref) {
           x1Line: columnWidth * (i + 1),
           y1Line: 0,
           y2Line: topDefaultHeight,
-          xText: columnWidth * (i + 1) - getDaysInMonth(date.getMonth(), date.getFullYear()) * columnWidth * 0.5,
+          xText: topValues.length === 0 ? columnWidth * (i + 1) * 0.5 : columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
+          yText: topDefaultHeight * 0.9
+        }));
+      }
+
+      if (i + 1 === dates.length) {
+        var _topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
+
+        topValues.push(React__default.createElement(TopPartOfCalendar, {
+          key: _topValue + date.getFullYear(),
+          value: _topValue,
+          x1Line: columnWidth * (i + 1),
+          y1Line: 0,
+          y2Line: topDefaultHeight,
+          xText: columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
           yText: topDefaultHeight * 0.9
         }));
       }
@@ -1817,7 +1967,7 @@ var Bar = function Bar(_ref) {
   var handleHeight = task.height / 2 - 1;
 
   if (type == "planned") {
-    if (task.x1 && task.x2) return React__default.createElement("g", {
+    if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0) return React__default.createElement("g", {
       className: styles$6.barWrapper,
       tabIndex: 0
     }, React__default.createElement(BarDisplay, {
@@ -1865,7 +2015,7 @@ var Bar = function Bar(_ref) {
       className: styles$6.barWrapper,
       tabIndex: 0
     });
-  } else if (task.actualx1 && task.actualx2) {
+  } else if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0) {
     return React__default.createElement("g", {
       className: styles$6.barWrapper,
       tabIndex: 0
@@ -2052,11 +2202,11 @@ var TaskItem = function TaskItem(props) {
   React.useEffect(function () {
     switch (task.typeInternal) {
       case "milestone":
-        setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);
+        if (task.x1 >= 0 && task.actualx1 >= 0) setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);else setTaskItem([]);
         break;
 
       case "project":
-        setTaskItem([React__default.createElement(Project, Object.assign({}, props))]);
+        if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0 && task.x2 > task.x1 && (task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0 && task.actualx2 > task.actualx1) setTaskItem([React__default.createElement(Project, Object.assign({}, props))]);else setTaskItem([]);
         break;
 
       case "smalltask":
@@ -2067,13 +2217,13 @@ var TaskItem = function TaskItem(props) {
         {
           var _taskItem = [];
 
-          if (task.x1 && task.x2) {
+          if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0) {
             _taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
               type: "planned"
             })));
           }
 
-          if (task.actualx1 && task.actualx2) {
+          if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0) {
             _taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
               type: "actual"
             })));
@@ -2384,7 +2534,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     return task.barChildren.map(function (child) {
       var _task$criticalPathArr, _task$criticalPathArr2;
 
-      return React__default.createElement(Arrow, {
+      if (task.x2 > task.x1 || task.actualx2 > task.actualx1) return React__default.createElement(Arrow, {
         key: "Arrow from " + task.id + " to " + tasks[child.index].id,
         taskFrom: task,
         taskTo: tasks[child.index],
@@ -2395,6 +2545,11 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
         arrowColor: ((_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : (_task$criticalPathArr2 = _task$criticalPathArr.find(function (arrow) {
           return arrow.taskId == tasks[child.index].id;
         })) === null || _task$criticalPathArr2 === void 0 ? void 0 : _task$criticalPathArr2.arrowColor) || "#808080"
+      });else return React__default.createElement("g", {
+        key: _task.id,
+        style: {
+          height: taskHeight
+        }
       });
     });
   })), React__default.createElement("g", {
@@ -2516,6 +2671,12 @@ var Gantt = function Gantt(_ref) {
   var tasks = _ref.tasks,
       _ref$leafTasks = _ref.leafTasks,
       leafTasks = _ref$leafTasks === void 0 ? [] : _ref$leafTasks,
+      _ref$scheduleType = _ref.scheduleType,
+      scheduleType = _ref$scheduleType === void 0 ? "main" : _ref$scheduleType,
+      _ref$startDate = _ref.startDate,
+      startDate = _ref$startDate === void 0 ? new Date() : _ref$startDate,
+      _ref$endDate = _ref.endDate,
+      endDate = _ref$endDate === void 0 ? new Date() : _ref$endDate,
       _ref$headerHeight = _ref.headerHeight,
       headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
       _ref$columnWidth = _ref.columnWidth,
@@ -2572,6 +2733,8 @@ var Gantt = function Gantt(_ref) {
       arrowIndent = _ref$arrowIndent === void 0 ? 20 : _ref$arrowIndent,
       _ref$todayColor = _ref.todayColor,
       todayColor = _ref$todayColor === void 0 ? "rgba(252, 248, 227, 0.5)" : _ref$todayColor,
+      _ref$weekendColor = _ref.weekendColor,
+      weekendColor = _ref$weekendColor === void 0 ? "#f5f5f5" : _ref$weekendColor,
       viewDate = _ref.viewDate,
       _ref$TooltipContent = _ref.TooltipContent,
       TooltipContent = _ref$TooltipContent === void 0 ? StandardTooltipContent : _ref$TooltipContent,
@@ -2586,18 +2749,26 @@ var Gantt = function Gantt(_ref) {
       onDelete = _ref.onDelete,
       onSelect = _ref.onSelect,
       onExpanderClick = _ref.onExpanderClick,
+      onMultiSelect = _ref.onMultiSelect,
       taskLabelRenderer = _ref.taskLabelRenderer;
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
 
   var _useState = React.useState(function () {
     var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
-        startDate = _ganttDateRange[0],
-        endDate = _ganttDateRange[1];
+        startDateRange = _ganttDateRange[0],
+        endDateRange = _ganttDateRange[1];
+
+    if (scheduleType === "lookAhead") {
+      return {
+        viewMode: viewMode,
+        dates: seedDates(startDate, endDate, viewMode)
+      };
+    }
 
     return {
       viewMode: viewMode,
-      dates: seedDates(startDate, endDate, viewMode)
+      dates: seedDates(startDateRange, endDateRange, viewMode)
     };
   }),
       dateSetup = _useState[0],
@@ -2656,6 +2827,14 @@ var Gantt = function Gantt(_ref) {
       ignoreScrollEvent = _useState12[0],
       setIgnoreScrollEvent = _useState12[1];
 
+  React.useEffect(function () {
+    if (scheduleType === "lookAhead" && startDate && endDate) {
+      setDateSetup({
+        viewMode: viewMode,
+        dates: seedDates(startDate, endDate, viewMode)
+      });
+    }
+  }, [startDate, endDate]);
   React.useEffect(function () {
     var filteredTasks;
 
@@ -2668,10 +2847,14 @@ var Gantt = function Gantt(_ref) {
     filteredTasks = filteredTasks.sort(sortTasks);
 
     var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount),
-        startDate = _ganttDateRange2[0],
-        endDate = _ganttDateRange2[1];
+        startDateRange = _ganttDateRange2[0],
+        endDateRange = _ganttDateRange2[1];
 
-    var newDates = seedDates(startDate, endDate, viewMode);
+    var newDates = seedDates(startDateRange, endDateRange, viewMode);
+
+    if (scheduleType === "lookAhead") {
+      newDates = seedDates(startDate, endDate, viewMode);
+    }
 
     if (rtl) {
       newDates = newDates.reverse();
@@ -2681,18 +2864,24 @@ var Gantt = function Gantt(_ref) {
       }
     }
 
-    setDateSetup({
-      dates: newDates,
-      viewMode: viewMode
-    });
+    if (scheduleType !== "lookAhead") {
+      setDateSetup({
+        dates: seedDates(startDateRange, endDateRange, viewMode),
+        viewMode: viewMode
+      });
+    }
 
     var _getCriticalPaths = getCriticalPaths(leafTasks),
         primaryPath = _getCriticalPaths[0],
         secondaryPath = _getCriticalPaths[1];
 
     uncolorAll(tasks);
-    colorPath(secondaryPath, "#00ff00", tasks);
-    colorPath(primaryPath, "#ff0000", tasks);
+
+    if (scheduleType !== "lookAhead") {
+      colorPath(secondaryPath, "#00ff00", tasks);
+      colorPath(primaryPath, "#ff0000", tasks);
+    }
+
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
   }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
   React.useEffect(function () {
@@ -2911,9 +3100,11 @@ var Gantt = function Gantt(_ref) {
     columnWidth: columnWidth,
     svgWidth: svgWidth,
     tasks: tasks,
+    scheduleType: scheduleType,
     rowHeight: rowHeight,
     dates: dateSetup.dates,
     todayColor: todayColor,
+    weekendColor: weekendColor,
     rtl: rtl
   };
   var calendarProps = {
@@ -2957,6 +3148,7 @@ var Gantt = function Gantt(_ref) {
     fontSize: fontSize,
     tasks: barTasks,
     leafTasks: leafTasks,
+    scheduleType: scheduleType,
     locale: locale,
     headerHeight: headerHeight,
     scrollY: scrollY,
@@ -2969,7 +3161,8 @@ var Gantt = function Gantt(_ref) {
     onDoubleClick: onDoubleClick,
     TaskListHeader: TaskListHeader,
     TaskListTable: TaskListTable,
-    taskLabelRenderer: taskLabelRenderer
+    taskLabelRenderer: taskLabelRenderer,
+    onMultiSelect: onMultiSelect
   };
   return React__default.createElement("div", null, React__default.createElement("div", {
     className: styles$9.wrapper,