feat: add weekdayContent to render custom weekdays component on month view

packages/react-calendar/README.md

@@ -168,6 +168,7 @@ Displays a given month, year, decade and a century, respectively.
 | tileClassName   | Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).                                                                                                                           | n/a           | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li><li>Function: `({ date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`</li></ul> |
 | tileContent     | Allows to render custom content within a given item (day on month view, month on year view and so on). **Note**: For tiles with custom content you might want to set fixed height of `react-calendar__tile` to ensure consistent layout. | n/a           | `({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`                                                                                                               |
 | value           | Calendar value. Can be either one value or an array of two values.                                                                                                                                                                       | n/a           | <ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>String: `2017-01-01`</li><li>An array of strings: `['2017-01-01', '2017-08-01']`</li></ul>  |
+| weekdayContent  | Allows to render custom content within a given weekday container on month view.                                                                                                                                                          | n/a           | `({ locale, date }) => <p>{formatDate(date, 'dd')}</p> : null`                                                                                                                                           |
 
 ## Useful links
 

packages/react-calendar/src/Calendar.tsx

@@ -39,6 +39,7 @@ import type {
   TileDisabledFunc,
   Value,
   View,
+  WeekdayContentFunc,
 } from './shared/types.js';
 
 import type {
@@ -430,6 +431,13 @@ export type CalendarProps = {
    * @example 'year'
    */
   view?: View;
+  /**
+   * Allows to render custom content within a given weekday container on month view.
+   *
+   * @example 'Sample'
+   * @example ({ locale, date }) => <p>{formatDate(date, 'dd')}</p> : null
+   */
+  weekdayContent?: WeekdayContentFunc | React.ReactNode;
 };
 
 function toDate(value: Date | string): Date {
@@ -666,6 +674,7 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
     tileDisabled,
     value: valueProps,
     view: viewProps,
+    weekdayContent,
   } = props;
 
   const [activeStartDateState, setActiveStartDateState] = useState<Date | null | undefined>(
@@ -1077,6 +1086,7 @@ const Calendar = forwardRef(function Calendar(props: CalendarProps, ref) {
             }
             showNeighboringMonth={showNeighboringMonth}
             showWeekNumbers={showWeekNumbers}
+            weekdayContent={weekdayContent}
             {...commonProps}
           />
         );

packages/react-calendar/src/MonthView.tsx

@@ -55,6 +55,7 @@ const MonthView: React.FC<MonthViewProps> = function MonthView(props) {
     formatWeekday,
     onClickWeekNumber,
     showWeekNumbers,
+    weekdayContent,
     ...childProps
   } = props;
 
@@ -66,6 +67,7 @@ const MonthView: React.FC<MonthViewProps> = function MonthView(props) {
         formatWeekday={formatWeekday}
         locale={locale}
         onMouseLeave={onMouseLeave}
+        weekdayContent={weekdayContent}
       />
     );
   }

packages/react-calendar/src/MonthView/Weekdays.spec.tsx

@@ -51,4 +51,25 @@ describe('Weekdays', () => {
 
     expect(firstWeekdayAbbr).toHaveAccessibleName('Weekday');
   });
+
+  it('applies weekdayContent properly given function', () => {
+    const content = 'content';
+    const weekdayContent = () => content;
+
+    const { container } = render(<Weekdays {...defaultProps} weekdayContent={weekdayContent} />);
+
+    const firstWeekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
+
+    expect(firstWeekday).toHaveTextContent(content);
+  });
+
+  it('applies weekdayContent properly given string', () => {
+    const content = 'content';
+
+    const { container } = render(<Weekdays {...defaultProps} weekdayContent={content} />);
+
+    const firstWeekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
+
+    expect(firstWeekday).toHaveTextContent(content);
+  });
 });

packages/react-calendar/src/MonthView/Weekdays.tsx

@@ -11,7 +11,7 @@ import {
 } from '../shared/dateFormatter.js';
 import { mapCalendarType } from '../shared/utils.js';
 
-import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js';
+import type { CalendarType, DeprecatedCalendarType, WeekdayContentFunc } from '../shared/types.js';
 
 const className = 'react-calendar__month-view__weekdays';
 const weekdayClassName = `${className}__weekday`;
@@ -35,6 +35,13 @@ type WeekdaysProps = {
    * @example (locale, date) => formatDate(date, 'dd')
    */
   formatWeekday?: typeof defaultFormatWeekday;
+  /**
+   * Allows to render custom content within a given weekday container on month view.
+   *
+   * @example 'Sample'
+   * @example ({ locale, date }) => <p>{formatDate(date, 'dd')}</p> : null
+   */
+  weekdayContent?: WeekdayContentFunc | React.ReactNode;
   /**
    * Locale that should be used by the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
    *
@@ -51,6 +58,7 @@ export default function Weekdays(props: WeekdaysProps) {
     formatWeekday = defaultFormatWeekday,
     locale,
     onMouseLeave,
+    weekdayContent: weekdayContentProps,
   } = props;
 
   const calendarType = mapCalendarType(calendarTypeOrDeprecatedCalendarType);
@@ -70,6 +78,11 @@ export default function Weekdays(props: WeekdaysProps) {
 
     const abbr = formatWeekday(locale, weekdayDate);
 
+    const weekdayContent =
+      typeof weekdayContentProps === 'function'
+        ? weekdayContentProps({ locale, date: weekdayDate })
+        : weekdayContentProps;
+
     weekdays.push(
       <div
         key={weekday}
@@ -82,6 +95,7 @@ export default function Weekdays(props: WeekdaysProps) {
         <abbr aria-label={abbr} title={abbr}>
           {formatShortWeekday(locale, weekdayDate).replace('.', '')}
         </abbr>
+        {weekdayContent}
       </div>,
     );
   }

packages/react-calendar/src/shared/types.ts

@@ -65,3 +65,10 @@ export type TileClassNameFunc = (args: TileArgs) => ClassName;
 export type TileContentFunc = (args: TileArgs) => React.ReactNode;
 
 export type TileDisabledFunc = (args: TileArgs) => boolean;
+
+export type WeekdayArgs = {
+  date: Date;
+  locale: string | undefined;
+};
+
+export type WeekdayContentFunc = (args: WeekdayArgs) => React.ReactNode;