From ce61fc34b25eb4db61ce3d809dee8d2c04ddd48c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A4=EC=A0=95=ED=95=9C?=
 <165637494+jeonghanyun@users.noreply.github.com>
Date: Sat, 2 Aug 2025 12:37:30 +0900
Subject: [PATCH] feat: Add weekendColor prop to highlight weekend columns

- Add weekendColor prop to StylingOption interface
- Add weekendColor support in GridBodyProps and GridBody component
- Implement weekend detection logic using getDay() (0=Sunday, 6=Saturday)
- Add weekend column highlighting with configurable color
- Update Gantt component to accept and pass weekendColor prop
- Add weekendColor usage examples in example app (#97979714)
- Update README.md with weekendColor documentation
- Change todayColor default from rgba(252, 248, 227, 0.5) to rgba(252, 248, 227, 1)

Based on PR #122 from MaTeMaTuK/gantt-task-react by AquilesOliveiraDev
---
 README.md                         |  1 +
 example/src/App.tsx               |  2 ++
 src/components/gantt/gantt.tsx    |  4 +++-
 src/components/grid/grid-body.tsx | 17 +++++++++++++++++
 src/types/public-types.ts         |  1 +
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9191d87ba..b2b088a2e 100644
--- a/README.md
+++ b/README.md
@@ -113,6 +113,7 @@ npm start
 | 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.                                                |
+| weekendColor               | string | Specifies the weekend columns 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 c2ab602eb..7a45ca82b 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
@@ -102,6 +103,7 @@ const App = () => {
         listCellWidth={isChecked ? "155px" : ""}
         ganttHeight={300}
         columnWidth={columnWidth}
+        weekendColor={"#97979714"}
       />
     </div>
   );
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
index b90483f3d..20e408b51 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 af689e509..4696127dc 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: ReactElement[] = [];
+  const weekends: ReactElement[] = [];
   let today: ReactElement = <rect />;
   for (let i = 0; i < dates.length; i++) {
     const date = dates[i];
@@ -73,6 +76,19 @@ 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() &&
@@ -121,6 +137,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 cc44ff17c..60e6313fb 100644
--- a/src/types/public-types.ts
+++ b/src/types/public-types.ts
@@ -113,6 +113,7 @@ export interface StylingOption {
   arrowColor?: string;
   arrowIndent?: number;
   todayColor?: string;
+  weekendColor?: string;
   TooltipContent?: React.FC<{
     task: Task;
     fontSize: string;