Merge pull request #5745 from marcelltoth/week-classname-support

Week classname support

Author: martijnrusschen

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;

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";
@@ -223,6 +224,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,

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
+      }
+    />
+  );
+};

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,13 @@ 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>
+    );
   }
 }