Skip to content

Commit ec636ec

Browse files
wojtekmajwojtekmaj
committed
Add formatWeekday prop
Closes #620
1 parent da23309 commit ec636ec

File tree

7 files changed

+49
-10
lines changed

7 files changed

+49
-10
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@ Displays a complete, interactive calendar.
101101
| 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')` |
102102
| 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')` |
103103
| 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')` |
104-
| 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')` |
104+
| 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')` |
105+
| 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')` |
105106
| 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')` |
106107
| goToRangeStartOnSelect | Whether to go to the beginning of the range when selecting the end of the range. | `true` | `false` |
107108
| inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `<div>` rendered by `<Calendar>` component. | n/a | <ul><li>Function:<br />`(ref) => { this.myCalendar = ref; }`</li><li>Ref created using `React.createRef`:<br />`this.ref = React.createRef();`<br />…<br />`inputRef={this.ref}`</li><li>Ref created using `React.useRef`:<br />`const ref = React.useRef();`<br />…<br />`inputRef={ref}`</li></ul> |

‎src/Calendar.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,7 @@ export default class Calendar extends Component {
515515
formatDay,
516516
formatLongDate,
517517
formatShortWeekday,
518+
formatWeekday,
518519
onClickWeekNumber,
519520
showDoubleView,
520521
showFixedNumberOfWeeks,
@@ -529,6 +530,7 @@ export default class Calendar extends Component {
529530
formatDay={formatDay}
530531
formatLongDate={formatLongDate}
531532
formatShortWeekday={formatShortWeekday}
533+
formatWeekday={formatWeekday}
532534
onClickWeekNumber={onClickWeekNumber}
533535
onMouseLeave={selectRange ? onMouseLeave : null}
534536
showFixedNumberOfWeeks={
@@ -659,6 +661,7 @@ Calendar.propTypes = {
659661
formatMonth: PropTypes.func,
660662
formatMonthYear: PropTypes.func,
661663
formatShortWeekday: PropTypes.func,
664+
formatWeekday: PropTypes.func,
662665
formatYear: PropTypes.func,
663666
goToRangeStartOnSelect: PropTypes.bool,
664667
inputRef: isRef,

‎src/Calendar.spec.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -894,13 +894,24 @@ describe('Calendar', () => {
894894
});
895895

896896
it('passes formatShortWeekday to MonthView component', () => {
897-
const formatShortWeekday = () => 'Weekday';
897+
const formatShortWeekday = () => 'Wkdy';
898898

899899
const { container } = render(<Calendar formatShortWeekday={formatShortWeekday} />);
900900

901901
const monthView = container.querySelector('.react-calendar__month-view');
902902

903-
expect(monthView).toHaveTextContent('Weekday');
903+
expect(monthView).toHaveTextContent('Wkdy');
904+
});
905+
906+
it('passes formatWeekday to MonthView component', () => {
907+
const formatWeekday = () => 'Weekday';
908+
909+
const { container } = render(<Calendar formatWeekday={formatWeekday} />);
910+
911+
const weekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
912+
const abbr = weekday.querySelector('abbr');
913+
914+
expect(abbr).toHaveAccessibleName('Weekday');
904915
});
905916

906917
it('passes formatMonth to YearView component', () => {

‎src/MonthView.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function MonthView(props) {
2222
const {
2323
calendarType = getCalendarTypeFromLocale(locale),
2424
formatShortWeekday,
25+
formatWeekday,
2526
onClickWeekNumber,
2627
showWeekNumbers,
2728
...childProps
@@ -32,6 +33,7 @@ export default function MonthView(props) {
3233
<Weekdays
3334
calendarType={calendarType}
3435
formatShortWeekday={formatShortWeekday}
36+
formatWeekday={formatWeekday}
3537
locale={locale}
3638
onMouseLeave={onMouseLeave}
3739
/>
@@ -87,6 +89,7 @@ MonthView.propTypes = {
8789
activeStartDate: PropTypes.instanceOf(Date).isRequired,
8890
calendarType: isCalendarType,
8991
formatShortWeekday: PropTypes.func,
92+
formatWeekday: PropTypes.func,
9093
locale: PropTypes.string,
9194
onClickWeekNumber: PropTypes.func,
9295
onMouseLeave: PropTypes.func,

‎src/MonthView.spec.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -151,15 +151,26 @@ describe('MonthView', () => {
151151
});
152152

153153
it('passes formatShortWeekday to Weekdays component', () => {
154-
const formatShortWeekday = () => 'Weekday';
154+
const formatShortWeekday = () => 'Wkdy';
155155

156156
const { container } = render(
157157
<MonthView {...defaultProps} formatShortWeekday={formatShortWeekday} />,
158158
);
159159

160160
const weekdays = container.querySelector('.react-calendar__month-view__weekdays');
161161

162-
expect(weekdays).toHaveTextContent('Weekday');
162+
expect(weekdays).toHaveTextContent('Wkdy');
163+
});
164+
165+
it('passes formatWeekday to Weekdays component', () => {
166+
const formatWeekday = () => 'Weekday';
167+
168+
const { container } = render(<MonthView {...defaultProps} formatWeekday={formatWeekday} />);
169+
170+
const weekday = container.querySelector('.react-calendar__month-view__weekdays__weekday');
171+
const abbr = weekday.querySelector('abbr');
172+
173+
expect(abbr).toHaveAccessibleName('Weekday');
163174
});
164175

165176
it('passes calendarType to Days component', () => {

‎src/MonthView/Weekdays.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import Flex from '../Flex';
77

88
import { getDayOfWeek, isWeekend } from '../shared/dates';
99
import {
10-
formatWeekday,
1110
formatShortWeekday as defaultFormatShortWeekday,
11+
formatWeekday as defaultFormatWeekday,
1212
} from '../shared/dateFormatter';
1313
import { isCalendarType } from '../shared/propTypes';
1414

@@ -19,6 +19,7 @@ export default function Weekdays(props) {
1919
const {
2020
calendarType,
2121
formatShortWeekday = defaultFormatShortWeekday,
22+
formatWeekday = defaultFormatWeekday,
2223
locale,
2324
onMouseLeave,
2425
} = props;
@@ -64,6 +65,7 @@ export default function Weekdays(props) {
6465
Weekdays.propTypes = {
6566
calendarType: isCalendarType.isRequired,
6667
formatShortWeekday: PropTypes.func,
68+
formatWeekday: PropTypes.func,
6769
locale: PropTypes.string,
6870
onMouseLeave: PropTypes.func,
6971
};

‎src/MonthView/Weekdays.spec.jsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,21 @@ describe('Weekdays', () => {
3333
});
3434

3535
it('renders weekdays with custom weekdays formatting', () => {
36-
const { container } = render(
37-
<Weekdays {...defaultProps} formatShortWeekday={() => 'Weekday'} />,
38-
);
36+
const { container } = render(<Weekdays {...defaultProps} formatShortWeekday={() => 'Wkdy'} />);
3937

4038
const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
4139
const firstWeekday = weekdays[0];
4240

43-
expect(firstWeekday).toHaveTextContent('Weekday');
41+
expect(firstWeekday).toHaveTextContent('Wkdy');
42+
});
43+
44+
it('renders weekdays with custom weekdays formatting', () => {
45+
const { container } = render(<Weekdays {...defaultProps} formatWeekday={() => 'Weekday'} />);
46+
47+
const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
48+
const firstWeekday = weekdays[0];
49+
const abbr = firstWeekday.querySelector('abbr');
50+
51+
expect(abbr).toHaveAccessibleName('Weekday');
4452
});
4553
});

0 commit comments

Comments
 (0)