Show previous month

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 (
       <CalendarWrapper
         className={classnames(this.styles.calendarWrapper, this.props.className)}
@@ -365,29 +370,26 @@ class Calendar extends PureComponent {
           </div>
         ) : (
           <Months direction={direction}>
-            {new Array(this.props.months).fill(null).map((_, i) => {
-              const monthStep = addMonths(this.state.focusedDate, i);
-              return (
-                <Month
-                  {...this.props}
-                  onPreviewChange={this.props.onPreviewChange || this.updatePreview}
-                  preview={this.props.preview || this.state.preview}
-                  ranges={ranges}
-                  key={i}
-                  drag={this.state.drag}
-                  dateOptions={this.dateOptions}
-                  disabledDates={disabledDates}
-                  month={monthStep}
-                  onDragSelectionStart={this.onDragSelectionStart}
-                  onDragSelectionEnd={this.onDragSelectionEnd}
-                  onDragSelectionMove={this.onDragSelectionMove}
-                  onMouseLeave={() => onPreviewChange && onPreviewChange()}
-                  styles={this.styles}
-                  showWeekDays={!isVertical || i === 0}
-                  showMonthName={!isVertical || i > 0}
-                />
-              );
-            })}
+            {months.map((monthStep, i) => (
+              <Month
+                {...this.props}
+                onPreviewChange={this.props.onPreviewChange || this.updatePreview}
+                preview={this.props.preview || this.state.preview}
+                ranges={ranges}
+                key={i}
+                drag={this.state.drag}
+                dateOptions={this.dateOptions}
+                disabledDates={disabledDates}
+                month={monthStep}
+                onDragSelectionStart={this.onDragSelectionStart}
+                onDragSelectionEnd={this.onDragSelectionEnd}
+                onDragSelectionMove={this.onDragSelectionMove}
+                onMouseLeave={() => onPreviewChange && onPreviewChange()}
+                styles={this.styles}
+                showWeekDays={!isVertical || i === 0}
+                showMonthName={!isVertical || i > 0}
+              />
+            ))}
           </Months>
         )}
       </CalendarWrapper>
@@ -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,

src/components/__tests__/Calendar.spec.js

@@ -12,6 +12,26 @@ describe('The Calendar Component', () => {
       const { queryByTestId } = render(<Calendar months={months} />);
       expect(queryByTestId('month').children).toHaveLength(months);
     });
+
+    it('should show the previous month by default', () => {
+      const { container, getByText } = render(<Calendar months={months} direction="horizontal" />);
+
+      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(
+        <Calendar months={months} startOnPreviousMonth={false} direction="horizontal" />
+      );
+
+      expect(container).toContainElement(getByText(nextMonth));
+    });
   });
 
   describe('select dates', () => {

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;