From f08060803d6152acc9a6e8bbba149f0ca18c2a58 Mon Sep 17 00:00:00 2001
From: Boyan Bogdanov <boyan.bogdanov@accedia.com>
Date: Tue, 22 Nov 2022 16:27:17 +0200
Subject: [PATCH 1/3] adds weekNumberContent prop to MonthView to render custom
 content in place of week numbers, much like tileContent

---
 src/Calendar.jsx              |  3 +++
 src/MonthView.jsx             |  5 ++++-
 src/MonthView/WeekNumber.jsx  | 21 +++++++++++++++++----
 src/MonthView/WeekNumbers.jsx | 12 ++++++++++--
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/Calendar.jsx b/src/Calendar.jsx
index f8f67bcd..c74643fc 100644
--- a/src/Calendar.jsx
+++ b/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,
diff --git a/src/MonthView.jsx b/src/MonthView.jsx
index ccef7ada..4303a857 100644
--- a/src/MonthView.jsx
+++ b/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]),
 };
diff --git a/src/MonthView/WeekNumber.jsx b/src/MonthView/WeekNumber.jsx
index 289d0c0e..90088627 100644
--- a/src/MonthView/WeekNumber.jsx
+++ b/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,7 +32,7 @@ export default function WeekNumber({ date, onClickWeekNumber, weekNumber, ...oth
       {children}
     </button>
   ) : (
-    <div {...props}>{children}</div>
+    <div {...props}> {children} </div>
   );
 }
 
@@ -28,4 +40,5 @@ WeekNumber.propTypes = {
   date: PropTypes.instanceOf(Date).isRequired,
   onClickWeekNumber: PropTypes.func,
   weekNumber: PropTypes.node.isRequired,
+  weekNumberContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 };
diff --git a/src/MonthView/WeekNumbers.jsx b/src/MonthView/WeekNumbers.jsx
index d3fcc225..92d40a11 100644
--- a/src/MonthView/WeekNumbers.jsx
+++ b/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]),
 };

From 9a98c498746630a43100d245bde1f0a9c17954e6 Mon Sep 17 00:00:00 2001
From: Boyan Bogdanov <boyan.bogdanov@accedia.com>
Date: Tue, 22 Nov 2022 16:29:12 +0200
Subject: [PATCH 2/3] extends WeekNumber test

---
 src/MonthView/WeekNumber.spec.jsx | 43 +++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/src/MonthView/WeekNumber.spec.jsx b/src/MonthView/WeekNumber.spec.jsx
index 5c223c94..6bc97f9a 100644
--- a/src/MonthView/WeekNumber.spec.jsx
+++ b/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);
+  });
 });

From b0f09f805fd61d1bf57bf4e14763881fdcf04e48 Mon Sep 17 00:00:00 2001
From: Boyan Bogdanov <boyan.bogdanov@accedia.com>
Date: Tue, 22 Nov 2022 16:29:27 +0200
Subject: [PATCH 3/3] Updates README

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a407fd50..0fcb0352 100644
--- a/README.md
+++ b/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"`                                                                                                                                                                                                                                                                                             |