From e8fe56b45066d96d9b585f1d52f305714f1c1f6e Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Mon, 25 Mar 2019 09:27:46 -0600
Subject: [PATCH 1/3] Show previous and current month by default

---
 src/components/Calendar.js                | 54 +++++++++++++----------
 src/components/__tests__/Calendar.spec.js | 20 +++++++++
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
index f1e009459..6e2ca898d 100644
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -300,6 +300,15 @@ class Calendar extends PureComponent {
       ...range,
       color: range.color || rangeColors[i] || color,
     }));
+
+    const months = new Array(this.props.months).fill().map((_, i) => {
+      let month = i;
+      if (this.props.startOnPreviousMonth) {
+        month = i - this.props.months + 1;
+      }
+      return addMonths(this.state.focusedDate, month);
+    });
+
     return (
       <CalendarWrapper
         className={classnames(this.styles.calendarWrapper, this.props.className)}
@@ -365,29 +374,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 +402,7 @@ class Calendar extends PureComponent {
 }
 
 Calendar.defaultProps = {
+  startOnPreviousMonth: true,
   disabledDates: [],
   classNames: {},
   locale: defaultLocale,
@@ -424,6 +431,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(<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', () => {

From 5add468b0f53ddc5285b83d814a3c79490625e0e Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Tue, 26 Mar 2019 13:01:15 -0600
Subject: [PATCH 2/3] Fix #4 - Fix previous month date selection

---
 src/components/Calendar.js | 6 +-----
 src/utils.js               | 7 ++++++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
index 6e2ca898d..e4e438f20 100644
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -302,11 +302,7 @@ class Calendar extends PureComponent {
     }));
 
     const months = new Array(this.props.months).fill().map((_, i) => {
-      let month = i;
-      if (this.props.startOnPreviousMonth) {
-        month = i - this.props.months + 1;
-      }
-      return addMonths(this.state.focusedDate, month);
+      return addMonths(this.state.focusedDate, i);
     });
 
     return (
diff --git a/src/utils.js b/src/utils.js
index 6a8bffd20..78c99d249 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) {
+    targetDate = subMonths(targetDate, 1);
+  }
 
   // initial focus
   if (!currentFocusedDate) return shownDate || targetDate;

From 43fb373e045913c68924b3147889bafafba31c21 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Wed, 27 Mar 2019 09:50:27 -0600
Subject: [PATCH 3/3] Start on previous month if shown more than 1 month

---
 src/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index 78c99d249..05e2cc9be 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -29,7 +29,7 @@ export function calcFocusDate(currentFocusedDate, props) {
   targetInterval.end = endOfMonth(targetInterval.end || targetInterval.start);
   let targetDate = targetInterval.start || targetInterval.end || shownDate || new Date();
 
-  if (props.startOnPreviousMonth) {
+  if (props.startOnPreviousMonth && props.months > 1) {
     targetDate = subMonths(targetDate, 1);
   }