Skip to content

Commit

Permalink
Add formatWeekday prop
Browse files Browse the repository at this point in the history 
Closes #620
  • Loading branch information
@wojtekmaj
wojtekmaj committed Sep 19, 2022
1 parent da23309 commit ec636ec
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 10 deletions.
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<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> |
Expand Down
3 changes: 3 additions & 0 deletions src/Calendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,7 @@ export default class Calendar extends Component {
formatDay,
formatLongDate,
formatShortWeekday,
formatWeekday,
onClickWeekNumber,
showDoubleView,
showFixedNumberOfWeeks,
Expand All @@ -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={
Expand Down Expand Up @@ -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,
Expand Down
15 changes: 13 additions & 2 deletions src/Calendar.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -894,13 +894,24 @@ describe('Calendar', () => {
});

it('passes formatShortWeekday to MonthView component', () => {
const formatShortWeekday = () => 'Weekday';
const formatShortWeekday = () => 'Wkdy';

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

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(<Calendar formatWeekday={formatWeekday} />);

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', () => {
Expand Down
3 changes: 3 additions & 0 deletions src/MonthView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default function MonthView(props) {
const {
calendarType = getCalendarTypeFromLocale(locale),
formatShortWeekday,
formatWeekday,
onClickWeekNumber,
showWeekNumbers,
...childProps
Expand All @@ -32,6 +33,7 @@ export default function MonthView(props) {
<Weekdays
calendarType={calendarType}
formatShortWeekday={formatShortWeekday}
formatWeekday={formatWeekday}
locale={locale}
onMouseLeave={onMouseLeave}
/>
Expand Down Expand Up @@ -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,
Expand Down
15 changes: 13 additions & 2 deletions src/MonthView.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,15 +151,26 @@ describe('MonthView', () => {
});

it('passes formatShortWeekday to Weekdays component', () => {
const formatShortWeekday = () => 'Weekday';
const formatShortWeekday = () => 'Wkdy';

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

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(<MonthView {...defaultProps} formatWeekday={formatWeekday} />);

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', () => {
Expand Down
4 changes: 3 additions & 1 deletion src/MonthView/Weekdays.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -19,6 +19,7 @@ export default function Weekdays(props) {
const {
calendarType,
formatShortWeekday = defaultFormatShortWeekday,
formatWeekday = defaultFormatWeekday,
locale,
onMouseLeave,
} = props;
Expand Down Expand Up @@ -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,
};
16 changes: 12 additions & 4 deletions src/MonthView/Weekdays.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,21 @@ describe('Weekdays', () => {
});

it('renders weekdays with custom weekdays formatting', () => {
const { container } = render(
<Weekdays {...defaultProps} formatShortWeekday={() => 'Weekday'} />,
);
const { container } = render(<Weekdays {...defaultProps} formatShortWeekday={() => '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(<Weekdays {...defaultProps} formatWeekday={() => 'Weekday'} />);

const weekdays = container.querySelectorAll('.react-calendar__month-view__weekdays__weekday');
const firstWeekday = weekdays[0];
const abbr = firstWeekday.querySelector('abbr');

expect(abbr).toHaveAccessibleName('Weekday');
});
});

0 comments on commit ec636ec

Please sign in to comment.