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 |
|
+| weekNumberContent | Allows to render custom content within a given week number container at the left of the `MonthView`. Overrides `showWeekNumbers`. | n/a |
String: `"Sample"`
React element: ``
Function: `({ weekNumber, date }) =>
It's week {weekNumber} of the year {date.getFullYear()}!
`
|
| tileDisabled | Pass a function to determine if a certain day should be displayed as disabled. | n/a |
|
| 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 |
Date: `new Date()`
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"` |
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 = {weekNumber};
+ const weekContent = useMemo(() => {
+ return typeof weekNumberContent === 'function'
+ ? weekNumberContent({ date, weekNumber })
+ : weekNumberContent;
+ }, [weekNumberContent, weekNumber, date]);
+
+ const children = <>{weekContent ?? weekNumber}>;
return onClickWeekNumber ? (