From da40cdfacf71e02ec6a6dc5a389fdebb62118b98 Mon Sep 17 00:00:00 2001
From: Aquiles Oliveira de Souza
 <aquilesoliveira@MacBook-Air-de-Aquiles-2.local>
Date: Thu, 20 Oct 2022 15:21:16 -0300
Subject: [PATCH] Add new prop weekendColor to grid

---
 README.md                         |  3 ++-
 example/src/App.tsx               |  1 +
 src/components/gantt/gantt.tsx    |  4 +++-
 src/components/grid/grid-body.tsx | 19 +++++++++++++++++++
 src/types/public-types.ts         |  1 +
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index bec63821..ed827d37 100644
--- a/README.md
+++ b/README.md
@@ -112,7 +112,8 @@ npm start
 | barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select.                                |
 | arrowColor                 | string | Specifies the relationship arrow fill color.                                                   |
 | arrowIndent                | number | Specifies the relationship arrow right indent. Sets in px                                      |
-| todayColor                 | string | Specifies the current period column fill color.                                                |
+| todayColor                 | string | Specifies the current period column fill color.    
+| weekendColor                 | string | Specifies the current period column fill color.                                                |
 | TooltipContent             |        | Specifies the Tooltip view for selected taskbar.                                               |
 | TaskListHeader             |        | Specifies the task list Header view                                                            |
 | TaskListTable              |        | Specifies the task list Table view                                                             |
diff --git a/example/src/App.tsx b/example/src/App.tsx
index c2ab602e..673d8d49 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -87,6 +87,7 @@ const App = () => {
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
         columnWidth={columnWidth}
+        weekendColor={"#97979714"}
       />
       <h3>Gantt With Limited Height</h3>
       <Gantt
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
index b90483f3..20e408b5 100644
--- a/src/components/gantt/gantt.tsx
+++ b/src/components/gantt/gantt.tsx
@@ -53,7 +53,8 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   fontFamily = "Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue",
   fontSize = "14px",
   arrowIndent = 20,
-  todayColor = "rgba(252, 248, 227, 0.5)",
+  todayColor = "rgba(252, 248, 227, 1)",
+  weekendColor = "transparent",
   viewDate,
   TooltipContent = StandardTooltipContent,
   TaskListHeader = TaskListHeaderDefault,
@@ -394,6 +395,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     rowHeight,
     dates: dateSetup.dates,
     todayColor,
+    weekendColor,
     rtl,
   };
   const calendarProps: CalendarProps = {
diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx
index 18e6f2b0..4c753111 100644
--- a/src/components/grid/grid-body.tsx
+++ b/src/components/grid/grid-body.tsx
@@ -10,6 +10,7 @@ export type GridBodyProps = {
   rowHeight: number;
   columnWidth: number;
   todayColor: string;
+  weekendColor: string;
   rtl: boolean;
 };
 export const GridBody: React.FC<GridBodyProps> = ({
@@ -19,6 +20,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
   svgWidth,
   columnWidth,
   todayColor,
+  weekendColor,
   rtl,
 }) => {
   let y = 0;
@@ -60,6 +62,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
   const now = new Date();
   let tickX = 0;
   const ticks: ReactChild[] = [];
+  const weekends: ReactChild[] = [];
   let today: ReactChild = <rect />;
   for (let i = 0; i < dates.length; i++) {
     const date = dates[i];
@@ -73,6 +76,20 @@ export const GridBody: React.FC<GridBodyProps> = ({
         className={styles.gridTick}
       />
     );
+
+    if (weekendColor !== "transparent" && dates[i + 1] && [0,6].includes(dates[i + 1].getDay())) {
+      weekends.push(
+        <rect
+          key={"WeekendColumn" + i}
+          x={tickX + columnWidth}
+          y={0}
+          width={columnWidth}
+          height={y}
+          fill={weekendColor}
+        />
+      );
+    }
+
     if (
       (i + 1 !== dates.length &&
         date.getTime() < now.getTime() &&
@@ -114,6 +131,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
         />
       );
     }
+
     tickX += columnWidth;
   }
   return (
@@ -121,6 +139,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
       <g className="rows">{gridRows}</g>
       <g className="rowLines">{rowLines}</g>
       <g className="ticks">{ticks}</g>
+      <g className="weekends">{weekends}</g>
       <g className="today">{today}</g>
     </g>
   );
diff --git a/src/types/public-types.ts b/src/types/public-types.ts
index f4c641a6..2193160a 100644
--- a/src/types/public-types.ts
+++ b/src/types/public-types.ts
@@ -112,6 +112,7 @@ export interface StylingOption {
   arrowColor?: string;
   arrowIndent?: number;
   todayColor?: string;
+  weekendColor?: string;
   TooltipContent?: React.FC<{
     task: Task;
     fontSize: string;