From ec636ec8a0a8dc53857183cb138223998979ed66 Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Mon, 19 Sep 2022 08:50:48 +0200 Subject: [PATCH] Add formatWeekday prop Closes #620 --- README.md | 3 ++- src/Calendar.jsx | 3 +++ src/Calendar.spec.jsx | 15 +++++++++++++-- src/MonthView.jsx | 3 +++ src/MonthView.spec.jsx | 15 +++++++++++++-- src/MonthView/Weekdays.jsx | 4 +++- src/MonthView/Weekdays.spec.jsx | 16 ++++++++++++---- 7 files changed, 49 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index b1dad4b4..5f9d4595 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,8 @@ Displays a complete, interactive calendar. | formatLongDate | Function called to override default formatting of day tile `abbr` labels. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd MMM YYYY')` | | formatMonth | Function called to override default formatting of month names. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'MMM')` | | formatMonthYear | Function called to override default formatting of months and years. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'MMMM YYYY')` | -| formatShortWeekday | Function called to override default formatting of weekday names. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd')` | +| formatShortWeekday | Function called to override default formatting of weekday names (shortened). Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd')` | +| formatWeekday | Function called to override default formatting of weekday names. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'dd')` | | formatYear | Function called to override default formatting of year in the top navigation section. Can be used to use your own formatting function. | (default formatter) | `(locale, date) => formatDate(date, 'YYYY')` | | goToRangeStartOnSelect | Whether to go to the beginning of the range when selecting the end of the range. | `true` | `false` | | inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `
` rendered by `` component. | n/a |
  • Function:
    `(ref) => { this.myCalendar = ref; }`
  • Ref created using `React.createRef`:
    `this.ref = React.createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `React.useRef`:
    `const ref = React.useRef();`
    …
    `inputRef={ref}`
| diff --git a/src/Calendar.jsx b/src/Calendar.jsx index cd3e7dc2..2f1dbfca 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -515,6 +515,7 @@ export default class Calendar extends Component { formatDay, formatLongDate, formatShortWeekday, + formatWeekday, onClickWeekNumber, showDoubleView, showFixedNumberOfWeeks, @@ -529,6 +530,7 @@ export default class Calendar extends Component { formatDay={formatDay} formatLongDate={formatLongDate} formatShortWeekday={formatShortWeekday} + formatWeekday={formatWeekday} onClickWeekNumber={onClickWeekNumber} onMouseLeave={selectRange ? onMouseLeave : null} showFixedNumberOfWeeks={ @@ -659,6 +661,7 @@ Calendar.propTypes = { formatMonth: PropTypes.func, formatMonthYear: PropTypes.func, formatShortWeekday: PropTypes.func, + formatWeekday: PropTypes.func, formatYear: PropTypes.func, goToRangeStartOnSelect: PropTypes.bool, inputRef: isRef, diff --git a/src/Calendar.spec.jsx b/src/Calendar.spec.jsx index 4efd8459..a1b1eec2 100644 --- a/src/Calendar.spec.jsx +++ b/src/Calendar.spec.jsx @@ -894,13 +894,24 @@ describe('Calendar', () => { }); it('passes formatShortWeekday to MonthView component', () => { - const formatShortWeekday = () => 'Weekday'; + const formatShortWeekday = () => 'Wkdy'; const { container } = render(); const monthView = container.querySelector('.react-calendar__month-view'); - expect(monthView).toHaveTextContent('Weekday'); + expect(monthView).toHaveTextContent('Wkdy'); + }); + + it('passes formatWeekday to MonthView component', () => { + const formatWeekday = () => 'Weekday'; + + const { container } = render(); + + const weekday = container.querySelector('.react-calendar__month-view__weekdays__weekday'); + const abbr = weekday.querySelector('abbr'); + + expect(abbr).toHaveAccessibleName('Weekday'); }); it('passes formatMonth to YearView component', () => { diff --git a/src/MonthView.jsx b/src/MonthView.jsx index 6340c2c1..4b917a7f 100644 --- a/src/MonthView.jsx +++ b/src/MonthView.jsx @@ -22,6 +22,7 @@ export default function MonthView(props) { const { calendarType = getCalendarTypeFromLocale(locale), formatShortWeekday, + formatWeekday, onClickWeekNumber, showWeekNumbers, ...childProps @@ -32,6 +33,7 @@ export default function MonthView(props) { @@ -87,6 +89,7 @@ MonthView.propTypes = { activeStartDate: PropTypes.instanceOf(Date).isRequired, calendarType: isCalendarType, formatShortWeekday: PropTypes.func, + formatWeekday: PropTypes.func, locale: PropTypes.string, onClickWeekNumber: PropTypes.func, onMouseLeave: PropTypes.func, diff --git a/src/MonthView.spec.jsx b/src/MonthView.spec.jsx index 98a9d3aa..92e721ea 100644 --- a/src/MonthView.spec.jsx +++ b/src/MonthView.spec.jsx @@ -151,7 +151,7 @@ describe('MonthView', () => { }); it('passes formatShortWeekday to Weekdays component', () => { - const formatShortWeekday = () => 'Weekday'; + const formatShortWeekday = () => 'Wkdy'; const { container } = render( , @@ -159,7 +159,18 @@ describe('MonthView', () => { const weekdays = container.querySelector('.react-calendar__month-view__weekdays'); - expect(weekdays).toHaveTextContent('Weekday'); + expect(weekdays).toHaveTextContent('Wkdy'); + }); + + it('passes formatWeekday to Weekdays component', () => { + const formatWeekday = () => 'Weekday'; + + const { container } = render(); + + const weekday = container.querySelector('.react-calendar__month-view__weekdays__weekday'); + const abbr = weekday.querySelector('abbr'); + + expect(abbr).toHaveAccessibleName('Weekday'); }); it('passes calendarType to Days component', () => { diff --git a/src/MonthView/Weekdays.jsx b/src/MonthView/Weekdays.jsx index 853d24be..3a5e72c9 100644 --- a/src/MonthView/Weekdays.jsx +++ b/src/MonthView/Weekdays.jsx @@ -7,8 +7,8 @@ import Flex from '../Flex'; import { getDayOfWeek, isWeekend } from '../shared/dates'; import { - formatWeekday, formatShortWeekday as defaultFormatShortWeekday, + formatWeekday as defaultFormatWeekday, } from '../shared/dateFormatter'; import { isCalendarType } from '../shared/propTypes'; @@ -19,6 +19,7 @@ export default function Weekdays(props) { const { calendarType, formatShortWeekday = defaultFormatShortWeekday, + formatWeekday = defaultFormatWeekday, locale, onMouseLeave, } = props; @@ -64,6 +65,7 @@ export default function Weekdays(props) { Weekdays.propTypes = { calendarType: isCalendarType.isRequired, formatShortWeekday: PropTypes.func, + formatWeekday: PropTypes.func, locale: PropTypes.string, onMouseLeave: PropTypes.func, }; diff --git a/src/MonthView/Weekdays.spec.jsx b/src/MonthView/Weekdays.spec.jsx index f5a98761..b2140dd2 100644 --- a/src/MonthView/Weekdays.spec.jsx +++ b/src/MonthView/Weekdays.spec.jsx @@ -33,13 +33,21 @@ describe('Weekdays', () => { }); it('renders weekdays with custom weekdays formatting', () => { - const { container } = render( - 'Weekday'} />, - ); + const { container } = render( 'Wkdy'} />); const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday'); const firstWeekday = weekdays[0]; - expect(firstWeekday).toHaveTextContent('Weekday'); + expect(firstWeekday).toHaveTextContent('Wkdy'); + }); + + it('renders weekdays with custom weekdays formatting', () => { + const { container } = render( 'Weekday'} />); + + const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday'); + const firstWeekday = weekdays[0]; + const abbr = firstWeekday.querySelector('abbr'); + + expect(abbr).toHaveAccessibleName('Weekday'); }); });