feat: add renderCustomDayName prop for custom weekday header rendering

gnato · gnato · commit 2d7195d5f70b · 2025-12-03T09:46:08.000+01:00
Add ability to customize day name rendering in calendar header similar
to renderCustomHeader. Includes customDayNameCount parameter to support
different styling when displaying multiple months.

- Add ReactDatePickerCustomDayNameProps interface
- Extend Calendar header() method with customDayNameCount parameter
- Add comprehensive test coverage (7 test cases)
- Include example in docs-site demonstrating usage
diff --git a/.gitignore b/.gitignore
@@ -98,6 +98,7 @@ es
 tmp
 
 .vscode
+.history
 *.iml
 .idea
 
diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx
@@ -17,6 +17,7 @@ import ConfigureFloatingUI from "../../examples/ts/configureFloatingUI?raw";
 import CustomInput from "../../examples/ts/customInput?raw";
 import RenderCustomHeader from "../../examples/ts/renderCustomHeader?raw";
 import RenderCustomHeaderTwoMonths from "../../examples/ts/renderCustomHeaderTwoMonths?raw";
+import RenderCustomDayName from "../../examples/ts/renderCustomDayName?raw";
 import RenderCustomDay from "../../examples/ts/renderCustomDay?raw";
 import RenderCustomMonth from "../../examples/ts/renderCustomMonth?raw";
 import RenderCustomQuarter from "../../examples/ts/renderCustomQuarter?raw";
@@ -184,6 +185,10 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [
     title: "Custom header with two months displayed",
     component: RenderCustomHeaderTwoMonths,
   },
+  {
+    title: "Custom Day Names",
+    component: RenderCustomDayName,
+  },
   {
     title: "Custom Day",
     component: RenderCustomDay,
diff --git a/docs-site/src/examples/ts/renderCustomDayName.tsx b/docs-site/src/examples/ts/renderCustomDayName.tsx
@@ -0,0 +1,48 @@
+const RenderCustomDayName = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+
+  const renderDayName = ({
+    day,
+    shortName,
+    fullName,
+    customDayNameCount,
+  }: ReactDatePickerCustomDayNameProps): React.ReactNode => {
+    // Example: Add emoji or custom styling to day names
+    const dayEmojis: { [key: string]: string } = {
+      Monday: "🌙",
+      Tuesday: "🔥",
+      Wednesday: "🌊",
+      Thursday: "⚡",
+      Friday: "🎉",
+      Saturday: "🌞",
+      Sunday: "☀️",
+    };
+
+    const emoji = dayEmojis[fullName] || "";
+
+    // Apply different styling based on customDayNameCount when showing multiple months
+    const style = customDayNameCount > 0 ? { color: "red" } : {};
+
+    return (
+      <>
+        <span className="react-datepicker__sr-only">{fullName}</span>
+        <span aria-hidden="true" title={fullName} style={style}>
+          {emoji}
+          <br />
+          {shortName}
+        </span>
+      </>
+    );
+  };
+
+  return (
+    <DatePicker
+      selected={selectedDate}
+      onChange={setSelectedDate}
+      renderCustomDayName={renderDayName}
+      monthsShown={2}
+    />
+  );
+};
+
+render(RenderCustomDayName);
diff --git a/src/calendar.tsx b/src/calendar.tsx
@@ -114,6 +114,14 @@ export interface ReactDatePickerCustomHeaderProps {
   };
 }
 
+export interface ReactDatePickerCustomDayNameProps {
+  day: Date;
+  shortName: string;
+  fullName: string;
+  locale?: Locale;
+  customDayNameCount: number;
+}
+
 type CalendarProps = React.PropsWithChildren<
   Omit<
     YearDropdownProps,
@@ -195,6 +203,9 @@ type CalendarProps = React.PropsWithChildren<
       renderCustomHeader?: (
         props: ReactDatePickerCustomHeaderProps,
       ) => React.ReactElement;
+      renderCustomDayName?: (
+        props: ReactDatePickerCustomDayNameProps,
+      ) => React.ReactNode;
       onYearMouseEnter?: YearProps["onYearMouseEnter"];
       onYearMouseLeave?: YearProps["onYearMouseLeave"];
       monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"];
@@ -477,7 +488,10 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  header = (date: Date = this.state.date): React.ReactElement[] => {
+  header = (
+    date: Date = this.state.date,
+    customDayNameCount: number = 0,
+  ): React.ReactElement[] => {
     // Return empty array if date is invalid
     if (!isValid(date)) {
       return [];
@@ -507,11 +521,38 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
       [0, 1, 2, 3, 4, 5, 6].map((offset) => {
         const day = addDays(startOfWeek, offset);
         const weekDayName = this.formatWeekday(day, this.props.locale);
+        const fullDayName = formatDate(day, "EEEE", this.props.locale);
 
         const weekDayClassName = this.props.weekDayClassName
           ? this.props.weekDayClassName(day)
           : undefined;
 
+        // Use custom render if provided
+        if (this.props.renderCustomDayName) {
+          const customContent = this.props.renderCustomDayName({
+            day,
+            shortName: weekDayName,
+            fullName: fullDayName,
+            locale: this.props.locale,
+            customDayNameCount,
+          });
+
+          return (
+            <div
+              key={offset}
+              role="columnheader"
+              className={clsx(
+                "react-datepicker__day-name",
+                weekDayClassName,
+                disabled ? "react-datepicker__day-name--disabled" : "",
+              )}
+            >
+              {customContent}
+            </div>
+          );
+        }
+
+        // Default render
         return (
           <div
             key={offset}
@@ -522,9 +563,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
               disabled ? "react-datepicker__day-name--disabled" : "",
             )}
           >
-            <span className="react-datepicker__sr-only">
-              {formatDate(day, "EEEE", this.props.locale)}
-            </span>
+            <span className="react-datepicker__sr-only">{fullDayName}</span>
             <span aria-hidden="true">{weekDayName}</span>
           </div>
         );
@@ -871,9 +910,9 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderDayNamesHeader = (monthDate: Date) => (
+  renderDayNamesHeader = (monthDate: Date, customDayNameCount: number = 0) => (
     <div className="react-datepicker__day-names" role="row">
-      {this.header(monthDate)}
+      {this.header(monthDate, customDayNameCount)}
     </div>
   );
 
@@ -1055,7 +1094,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
             selectingDate={this.state.selectingDate}
             monthShowsDuplicateDaysEnd={monthShowsDuplicateDaysEnd}
             monthShowsDuplicateDaysStart={monthShowsDuplicateDaysStart}
-            dayNamesHeader={this.renderDayNamesHeader(monthDate)}
+            dayNamesHeader={this.renderDayNamesHeader(monthDate, i)}
           />
         </div>,
       );
diff --git a/src/index.tsx b/src/index.tsx
@@ -64,7 +64,10 @@ export { default as CalendarContainer } from "./calendar_container";
 
 export { registerLocale, setDefaultLocale, getDefaultLocale };
 
-export { ReactDatePickerCustomHeaderProps } from "./calendar";
+export {
+  ReactDatePickerCustomHeaderProps,
+  ReactDatePickerCustomDayNameProps,
+} from "./calendar";
 
 // Compares dates year+month combinations
 function hasPreSelectionChanged(
diff --git a/src/test/render_custom_day_name.test.tsx b/src/test/render_custom_day_name.test.tsx
@@ -0,0 +1,161 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import DatePicker from "../index";
+import { ReactDatePickerCustomDayNameProps } from "../calendar";
+
+describe("renderCustomDayName", () => {
+  it("should call renderCustomDayName function with correct parameters", () => {
+    const renderCustomDayName = jest.fn(
+      ({ shortName }: ReactDatePickerCustomDayNameProps) => (
+        <span>{shortName}</span>
+      ),
+    );
+
+    render(<DatePicker renderCustomDayName={renderCustomDayName} inline />);
+
+    // Should be called 7 times (one for each day of the week)
+    expect(renderCustomDayName).toHaveBeenCalledTimes(7);
+
+    // Check that it's called with correct parameters
+    const firstCall = renderCustomDayName.mock.calls[0]?.[0];
+    expect(firstCall).toBeDefined();
+    expect(firstCall).toHaveProperty("day");
+    expect(firstCall).toHaveProperty("shortName");
+    expect(firstCall).toHaveProperty("fullName");
+    expect(firstCall).toHaveProperty("locale");
+    expect(firstCall).toHaveProperty("customDayNameCount");
+    expect(firstCall?.day).toBeInstanceOf(Date);
+    expect(typeof firstCall?.shortName).toBe("string");
+    expect(typeof firstCall?.fullName).toBe("string");
+    expect(typeof firstCall?.customDayNameCount).toBe("number");
+  });
+
+  it("should render custom day names", () => {
+    const renderCustomDayName = ({
+      shortName,
+    }: ReactDatePickerCustomDayNameProps) => (
+      <span className="custom-day-name">Custom-{shortName}</span>
+    );
+
+    const { container } = render(
+      <DatePicker renderCustomDayName={renderCustomDayName} inline />,
+    );
+
+    const customDayNames = container.querySelectorAll(".custom-day-name");
+    expect(customDayNames).toHaveLength(7);
+    expect(customDayNames[0]?.textContent).toContain("Custom-");
+  });
+
+  it("should render default day names when renderCustomDayName is not provided", () => {
+    const { container } = render(<DatePicker inline />);
+
+    const dayNames = container.querySelectorAll(".react-datepicker__day-name");
+    expect(dayNames).toHaveLength(7);
+
+    // Check that default structure is present (sr-only + aria-hidden)
+    const firstDayName = dayNames[0];
+    expect(
+      firstDayName?.querySelector(".react-datepicker__sr-only"),
+    ).not.toBeNull();
+    expect(firstDayName?.querySelector('[aria-hidden="true"]')).not.toBeNull();
+  });
+
+  it("should use custom day names with accessibility", () => {
+    const renderCustomDayName = ({
+      shortName,
+      fullName,
+    }: ReactDatePickerCustomDayNameProps) => (
+      <>
+        <span className="react-datepicker__sr-only">{fullName}</span>
+        <span aria-hidden="true">{shortName}</span>
+      </>
+    );
+
+    const { container } = render(
+      <DatePicker renderCustomDayName={renderCustomDayName} inline />,
+    );
+
+    const dayNames = container.querySelectorAll(".react-datepicker__day-name");
+    expect(dayNames).toHaveLength(7);
+
+    // Check that accessibility structure is maintained
+    dayNames.forEach((dayName) => {
+      expect(
+        dayName.querySelector(".react-datepicker__sr-only"),
+      ).not.toBeNull();
+      expect(dayName.querySelector('[aria-hidden="true"]')).not.toBeNull();
+    });
+  });
+
+  it("should apply weekDayClassName along with custom day names", () => {
+    const weekDayClassName = (date: Date) => {
+      return date.getDay() === 0 || date.getDay() === 6 ? "weekend" : "";
+    };
+
+    const renderCustomDayName = ({
+      shortName,
+    }: ReactDatePickerCustomDayNameProps) => <span>{shortName}</span>;
+
+    const { container } = render(
+      <DatePicker
+        renderCustomDayName={renderCustomDayName}
+        weekDayClassName={weekDayClassName}
+        inline
+      />,
+    );
+
+    const weekendDays = container.querySelectorAll(
+      ".react-datepicker__day-name.weekend",
+    );
+    // Should have 2 weekend days (Saturday and Sunday)
+    expect(weekendDays.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("should pass locale to renderCustomDayName", () => {
+    const renderCustomDayName = jest.fn(
+      ({ shortName }: ReactDatePickerCustomDayNameProps) => (
+        <span>{shortName}</span>
+      ),
+    );
+
+    render(
+      <DatePicker
+        renderCustomDayName={renderCustomDayName}
+        locale="en-US"
+        inline
+      />,
+    );
+
+    const firstCall = renderCustomDayName.mock.calls[0]?.[0];
+    expect(firstCall?.locale).toBe("en-US");
+  });
+
+  it("should pass customDayNameCount when displaying multiple months", () => {
+    const renderCustomDayName = jest.fn(
+      ({ shortName }: ReactDatePickerCustomDayNameProps) => (
+        <span>{shortName}</span>
+      ),
+    );
+
+    render(
+      <DatePicker
+        renderCustomDayName={renderCustomDayName}
+        monthsShown={3}
+        inline
+      />,
+    );
+
+    // Should be called 7 times per month, so 21 times for 3 months
+    expect(renderCustomDayName).toHaveBeenCalledTimes(21);
+
+    // Check that customDayNameCount is different for each month
+    const firstMonthCall = renderCustomDayName.mock.calls[0]?.[0];
+    const secondMonthCall = renderCustomDayName.mock.calls[7]?.[0];
+    const thirdMonthCall = renderCustomDayName.mock.calls[14]?.[0];
+
+    expect(firstMonthCall?.customDayNameCount).toBe(0);
+    expect(secondMonthCall?.customDayNameCount).toBe(1);
+    expect(thirdMonthCall?.customDayNameCount).toBe(2);
+  });
+});

-Original file line number
+Diff line change
 tmp
 .vscode
 +.history
 *.iml
 .idea