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;