Feature: custom week number tile content

README.md

@@ -140,7 +140,8 @@ Displays a complete, interactive calendar.
 | selectRange             | Whether the user shall select two dates forming a range instead of just one. Note: This feature will make React-Calendar return array with two dates regardless of returnValue setting.                                                                                                                                                                                                                                    | `false`                                               | `true`                                                                                                                                                                                                                                                                                               |
 | showWeekNumbers         | Whether week numbers shall be shown at the left of MonthView or not.                                                                                                                                                                                                                                                                                                                                                       | `false`                                               | `true`                                                                                                                                                                                                                                                                                               |
 | 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: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null`</li></ul>                                                                            |
-| tileContent             | Allows to render custom content within a given calendar item (day on month view, month on year view and so on).                                                                                                                                                                                                                                                                                                            | n/a                                                   | <ul><li>String: `"Sample"`</li><li>React element: `<TileContent />`</li><li>Function: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`</li></ul>                                                                                          |
+| tileContent             | Allows to render custom content in a given calendar item (day on month view, month on year view and so on).                                                                                                                                                                                                                                                                                                                | n/a                                                   | <ul><li>String: `"Sample"`</li><li>React element: `<TileContent />`</li><li>Function: `({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null`</li></ul>                                                                                          |
+| weekNumberContent       | Allows to render custom content within a given week number container at the left of the `MonthView`. Overrides `showWeekNumbers`.                                                                                                                                                                                                                                                                                          | n/a                                                   | <ul><li>String: `"Sample"`</li><li>React element: `<WeekNumberContent />`</li><li>Function: `({ weekNumber, date }) => <p>It's week {weekNumber} of the year {date.getFullYear()}!</p>`</li></ul>                                                                                                    |
 | tileDisabled            | Pass a function to determine if a certain day should be displayed as disabled.                                                                                                                                                                                                                                                                                                                                             | n/a                                                   | <ul><li>Function: `({activeStartDate, date, view }) => date.getDay() === 0`</li></ul>                                                                                                                                                                                                                |
 | value                   | Calendar value. Can be either one value or an array of two values. If you wish to use React-Calendar in an uncontrolled way, use `defaultValue` instead.                                                                                                                                                                                                                                                                   | n/a                                                   | <ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`                                                                                                                                                                                                 |
 | view                    | Determines which calendar view shall be opened. Does not disable navigation. Can be `"month"`, `"year"`, `"decade"` or `"century"`. If you wish to use React-Calendar in an uncontrolled way, use `defaultView` instead.                                                                                                                                                                                                   | The most detailed view allowed                        | `"year"`                                                                                                                                                                                                                                                                                             |

src/Calendar.jsx

@@ -521,6 +521,7 @@ export default class Calendar extends Component {
           showFixedNumberOfWeeks,
           showNeighboringMonth,
           showWeekNumbers,
+          weekNumberContent,
         } = this.props;
         const { onMouseLeave } = this;
 
@@ -540,6 +541,7 @@ export default class Calendar extends Component {
             }
             showNeighboringMonth={showNeighboringMonth}
             showWeekNumbers={showWeekNumbers}
+            weekNumberContent={weekNumberContent}
             {...commonProps}
           />
         );
@@ -698,6 +700,7 @@ Calendar.propTypes = {
   showNavigation: PropTypes.bool,
   showNeighboringMonth: PropTypes.bool,
   showWeekNumbers: PropTypes.bool,
+  weekNumberContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tileClassName: PropTypes.oneOfType([PropTypes.func, isClassName]),
   tileContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tileDisabled: PropTypes.func,

src/MonthView.jsx

@@ -25,6 +25,7 @@ export default function MonthView(props) {
     formatWeekday,
     onClickWeekNumber,
     showWeekNumbers,
+    weekNumberContent,
     ...childProps
   } = props;
 
@@ -41,7 +42,7 @@ export default function MonthView(props) {
   }
 
   function renderWeekNumbers() {
-    if (!showWeekNumbers) {
+    if (!showWeekNumbers && !weekNumberContent) {
       return null;
     }
 
@@ -52,6 +53,7 @@ export default function MonthView(props) {
         onClickWeekNumber={onClickWeekNumber}
         onMouseLeave={onMouseLeave}
         showFixedNumberOfWeeks={showFixedNumberOfWeeks}
+        weekNumberContent={weekNumberContent}
       />
     );
   }
@@ -95,4 +97,5 @@ MonthView.propTypes = {
   onMouseLeave: PropTypes.func,
   showFixedNumberOfWeeks: PropTypes.bool,
   showWeekNumbers: PropTypes.bool,
+  weekNumberContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };

src/MonthView/WeekNumber.jsx

@@ -1,15 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 const className = 'react-calendar__tile';
 
-export default function WeekNumber({ date, onClickWeekNumber, weekNumber, ...otherProps }) {
+export default function WeekNumber({
+  date,
+  onClickWeekNumber,
+  weekNumber,
+  weekNumberContent,
+  ...otherProps
+}) {
   const props = {
     className,
     ...otherProps,
   };
 
-  const children = <span>{weekNumber}</span>;
+  const weekContent = useMemo(() => {
+    return typeof weekNumberContent === 'function'
+      ? weekNumberContent({ date, weekNumber })
+      : weekNumberContent;
+  }, [weekNumberContent, weekNumber, date]);
+
+  const children = <>{weekContent ?? weekNumber}</>;
 
   return onClickWeekNumber ? (
     <button
@@ -20,12 +32,13 @@ export default function WeekNumber({ date, onClickWeekNumber, weekNumber, ...oth
       {children}
     </button>
   ) : (
-    <div {...props}>{children}</div>
+    <div {...props}> {children} </div>
   );
 }
 
 WeekNumber.propTypes = {
   date: PropTypes.instanceOf(Date).isRequired,
   onClickWeekNumber: PropTypes.func,
   weekNumber: PropTypes.node.isRequired,
+  weekNumberContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };

src/MonthView/WeekNumber.spec.jsx

@@ -32,4 +32,47 @@ describe('<WeekNumber /> component', () => {
 
     expect(container).toHaveTextContent(weekNumber);
   });
+
+  it('calls weekNumberContent properly (only on related prop change)', () => {
+    const weekNumberContent = jest.fn();
+
+    const { rerender } = render(
+      <WeekNumber {...defaultProps} weekNumberContent={weekNumberContent} />,
+    );
+
+    // Trigger any unrelated prop change
+    rerender(
+      <WeekNumber
+        {...defaultProps}
+        onClickWeekNumber={() => 'unrelated'}
+        weekNumberContent={weekNumberContent}
+      />,
+    );
+
+    expect(weekNumberContent).toHaveBeenCalledTimes(1);
+    expect(weekNumberContent).toHaveBeenCalledWith({
+      ...defaultProps,
+    });
+  });
+
+  it('applies weekNumberContent to div properly given function', () => {
+    const content = 'content';
+    const weekNumberContent = () => content;
+    const { container } = render(
+      <WeekNumber {...defaultProps} weekNumberContent={weekNumberContent} />,
+    );
+
+    const div = container.querySelector('div');
+
+    expect(div).toHaveTextContent(content);
+  });
+
+  it('applies weekNumberContent to div properly given string', () => {
+    const content = 'content';
+    const { container } = render(<WeekNumber {...defaultProps} weekNumberContent={content} />);
+
+    const div = container.querySelector('div');
+
+    expect(div).toHaveTextContent(content);
+  });
 });

src/MonthView/WeekNumbers.jsx

@@ -9,8 +9,14 @@ import { getBeginOfWeek, getDayOfWeek, getWeekNumber } from '../shared/dates';
 import { isCalendarType } from '../shared/propTypes';
 
 export default function WeekNumbers(props) {
-  const { activeStartDate, calendarType, onClickWeekNumber, onMouseLeave, showFixedNumberOfWeeks } =
-    props;
+  const {
+    activeStartDate,
+    calendarType,
+    onClickWeekNumber,
+    onMouseLeave,
+    showFixedNumberOfWeeks,
+    weekNumberContent,
+  } = props;
 
   const numberOfWeeks = (() => {
     if (showFixedNumberOfWeeks) {
@@ -53,6 +59,7 @@ export default function WeekNumbers(props) {
           date={dates[weekIndex]}
           onClickWeekNumber={onClickWeekNumber}
           weekNumber={weekNumber}
+          weekNumberContent={weekNumberContent}
         />
       ))}
     </Flex>
@@ -65,4 +72,5 @@ WeekNumbers.propTypes = {
   onClickWeekNumber: PropTypes.func,
   onMouseLeave: PropTypes.func,
   showFixedNumberOfWeeks: PropTypes.bool,
+  weekNumberContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };