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;