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]),
 };