Add custom week classname support

Author: marcelltoth

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(

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>;
   }
 }