diff --git a/src/components/Calendar.js b/src/components/Calendar.js index f1e009459..e4e438f20 100644 --- a/src/components/Calendar.js +++ b/src/components/Calendar.js @@ -300,6 +300,11 @@ class Calendar extends PureComponent { ...range, color: range.color || rangeColors[i] || color, })); + + const months = new Array(this.props.months).fill().map((_, i) => { + return addMonths(this.state.focusedDate, i); + }); + return ( ) : ( - {new Array(this.props.months).fill(null).map((_, i) => { - const monthStep = addMonths(this.state.focusedDate, i); - return ( - onPreviewChange && onPreviewChange()} - styles={this.styles} - showWeekDays={!isVertical || i === 0} - showMonthName={!isVertical || i > 0} - /> - ); - })} + {months.map((monthStep, i) => ( + onPreviewChange && onPreviewChange()} + styles={this.styles} + showWeekDays={!isVertical || i === 0} + showMonthName={!isVertical || i > 0} + /> + ))} )} @@ -396,6 +398,7 @@ class Calendar extends PureComponent { } Calendar.defaultProps = { + startOnPreviousMonth: true, disabledDates: [], classNames: {}, locale: defaultLocale, @@ -424,6 +427,7 @@ Calendar.defaultProps = { }; Calendar.propTypes = { + startOnPreviousMonth: PropTypes.bool, disabledDates: PropTypes.array, minDate: PropTypes.object, maxDate: PropTypes.object, diff --git a/src/components/__tests__/Calendar.spec.js b/src/components/__tests__/Calendar.spec.js index 3fb0ab66b..34de38f45 100644 --- a/src/components/__tests__/Calendar.spec.js +++ b/src/components/__tests__/Calendar.spec.js @@ -12,6 +12,26 @@ describe('The Calendar Component', () => { const { queryByTestId } = render(); expect(queryByTestId('month').children).toHaveLength(months); }); + + it('should show the previous month by default', () => { + const { container, getByText } = render(); + + const previousMonth = `${format( + subMonths(new Date(), 1), + 'MMM' + )} ${new Date().getFullYear()}`; + expect(container).toContainElement(getByText(previousMonth)); + }); + + it('should show the next month with startOnPreviousMonth=false', () => { + const nextMonth = `${format(addMonths(new Date(), 1), 'MMM')} ${new Date().getFullYear()}`; + + const { container, getByText } = render( + + ); + + expect(container).toContainElement(getByText(nextMonth)); + }); }); describe('select dates', () => { diff --git a/src/utils.js b/src/utils.js index 6a8bffd20..05e2cc9be 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,6 +6,7 @@ import { endOfMonth, startOfWeek, endOfWeek, + subMonths, } from 'date-fns'; export function calcFocusDate(currentFocusedDate, props) { @@ -26,7 +27,11 @@ export function calcFocusDate(currentFocusedDate, props) { } targetInterval.start = startOfMonth(targetInterval.start || new Date()); targetInterval.end = endOfMonth(targetInterval.end || targetInterval.start); - const targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); + let targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); + + if (props.startOnPreviousMonth && props.months > 1) { + targetDate = subMonths(targetDate, 1); + } // initial focus if (!currentFocusedDate) return shownDate || targetDate;