From e979e119d92891e8bb15159b7c0b13e50f42bfe8 Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@marcelltoth.net>
Date: Mon, 21 Jul 2025 18:02:21 +0200
Subject: [PATCH 1/3] Add custom week classname support

---
 src/test/week_test.test.tsx | 17 +++++++++++++++++
 src/week.tsx                |  7 ++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/test/week_test.test.tsx b/src/test/week_test.test.tsx
index 1a6200c3e8..c1d934e66e 100644
--- a/src/test/week_test.test.tsx
+++ b/src/test/week_test.test.tsx
@@ -23,6 +23,23 @@ describe("Week", () => {
     expect(container.querySelector(".react-datepicker__week")).not.toBeNull();
   });
 
+  it("should apply className returned from passed weekClassName prop function", () => {
+    const className = "customClassNameWeek";
+    const monthClassNameFunc = () => className;
+    const { container } = render(
+      <Week
+        day={newDate()}
+        month={getMonth(newDate())}
+        weekClassName={monthClassNameFunc}
+      />,
+    );
+    expect(
+      container
+        .querySelector(".react-datepicker__week")
+        ?.classList.contains(className),
+    ).toBe(true);
+  });
+
   it("should render the days of the week", () => {
     const weekStart = getStartOfWeek(newDate("2015-12-20"));
     const { container } = render(
diff --git a/src/week.tsx b/src/week.tsx
index 1cfee1ad23..6d5125d2db 100644
--- a/src/week.tsx
+++ b/src/week.tsx
@@ -12,6 +12,7 @@ import Day from "./day";
 import WeekNumber from "./week_number";
 
 interface DayProps extends React.ComponentPropsWithoutRef<typeof Day> {}
+
 interface WeekNumberProps
   extends React.ComponentPropsWithoutRef<typeof WeekNumber> {}
 
@@ -38,6 +39,7 @@ interface WeekProps
     weekNumber: number,
     event: React.MouseEvent<HTMLDivElement>,
   ) => void;
+  weekClassName?: (date: Date) => string;
 }
 
 export default class Week extends Component<WeekProps> {
@@ -192,6 +194,9 @@ export default class Week extends Component<WeekProps> {
       ),
       "react-datepicker__week--keyboard-selected": this.isKeyboardSelected(),
     };
-    return <div className={clsx(weekNumberClasses)}>{this.renderDays()}</div>;
+    const customWeekClassName = this.props.weekClassName
+      ? this.props.weekClassName(this.startOfWeek())
+      : undefined;
+    return <div className={clsx(weekNumberClasses, customWeekClassName)}>{this.renderDays()}</div>;
   }
 }

From a8aa6a8f86732f5a98962a41aa1f0553906919fc Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@marcelltoth.net>
Date: Mon, 21 Jul 2025 18:05:59 +0200
Subject: [PATCH 2/3] Add example

---
 docs-site/src/components/Examples/examples.scss |  5 +++++
 docs-site/src/components/Examples/index.jsx     |  5 +++++
 docs-site/src/examples/customWeekClassName.js   | 12 ++++++++++++
 3 files changed, 22 insertions(+)
 create mode 100644 docs-site/src/examples/customWeekClassName.js

diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
index 9c38c04cec..5374948917 100644
--- a/docs-site/src/components/Examples/examples.scss
+++ b/docs-site/src/components/Examples/examples.scss
@@ -133,6 +133,11 @@
   color: #f00;
 }
 
+.react-datepicker__week.highlighted {
+  background-color: #ddffdd;
+  border-radius: 5px;
+}
+
 .example-custom-input {
   cursor: pointer;
   padding: 5px 15px;
diff --git a/docs-site/src/components/Examples/index.jsx b/docs-site/src/components/Examples/index.jsx
index 0584f09c3a..46f146df25 100644
--- a/docs-site/src/components/Examples/index.jsx
+++ b/docs-site/src/components/Examples/index.jsx
@@ -18,6 +18,7 @@ import CustomDateFormat from "../../examples/customDateFormat?raw";
 import CustomClassName from "../../examples/customClassName?raw";
 import CustomCalendarClassName from "../../examples/customCalendarClassName?raw";
 import CustomDayClassName from "../../examples/customDayClassName?raw";
+import CustomWeekClassName from "../../examples/customWeekClassName?raw";
 import CustomTimeClassName from "../../examples/customTimeClassName?raw";
 import Today from "../../examples/today?raw";
 import PlaceholderText from "../../examples/placeholderText?raw";
@@ -222,6 +223,10 @@ export default class exampleComponents extends React.Component {
       title: "Custom day class name",
       component: CustomDayClassName,
     },
+    {
+      title: "Custom week class name",
+      component: CustomWeekClassName,
+    },
     {
       title: "Custom date format",
       component: CustomDateFormat,
diff --git a/docs-site/src/examples/customWeekClassName.js b/docs-site/src/examples/customWeekClassName.js
new file mode 100644
index 0000000000..1f2fb990e1
--- /dev/null
+++ b/docs-site/src/examples/customWeekClassName.js
@@ -0,0 +1,12 @@
+() => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+      weekClassName={(date) =>
+        getDate(date) % 2 === 0 ? "highlighted" : undefined
+      }
+    />
+  );
+};

From 0c820081f2a7624283ace4ff444c07b1da6cf13a Mon Sep 17 00:00:00 2001
From: Marcell Toth <marcell@marcelltoth.net>
Date: Fri, 8 Aug 2025 13:35:13 +0200
Subject: [PATCH 3/3] Fix code formatting issue

---
 src/week.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/week.tsx b/src/week.tsx
index 6d5125d2db..a115712860 100644
--- a/src/week.tsx
+++ b/src/week.tsx
@@ -197,6 +197,10 @@ export default class Week extends Component<WeekProps> {
     const customWeekClassName = this.props.weekClassName
       ? this.props.weekClassName(this.startOfWeek())
       : undefined;
-    return <div className={clsx(weekNumberClasses, customWeekClassName)}>{this.renderDays()}</div>;
+    return (
+      <div className={clsx(weekNumberClasses, customWeekClassName)}>
+        {this.renderDays()}
+      </div>
+    );
   }
 }