From 1b97315b5448241b1f262f7950fbf47720f4ecb6 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 18 Oct 2020 19:50:34 +0800
Subject: [PATCH] fix(Calendar): does not show current month with larger screen
 sizes (#7355)

* fix(Calendar): does not show current month with larger screen sizes

* chore: fix demo snapshot
---
 src/calendar/index.js                         | 27 ++++++++------
 .../test/__snapshots__/demo.spec.js.snap      | 35 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/src/calendar/index.js b/src/calendar/index.js
index 5fc0c1ec4..6f6b7052d 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -266,28 +266,33 @@ export default createComponent({
 
       let height = 0;
       let currentMonth;
-      let visibleIndex;
+      const visibleRange = [-1, -1];
 
       for (let i = 0; i < months.length; i++) {
         const visible = height <= bottom && height + heights[i] >= top;
 
-        if (visible && !currentMonth) {
-          visibleIndex = i;
-          currentMonth = months[i];
-        }
+        if (visible) {
+          visibleRange[1] = i;
 
-        if (!months[i].visible && visible) {
-          this.$emit('month-show', {
-            date: months[i].date,
-            title: months[i].title,
-          });
+          if (!currentMonth) {
+            currentMonth = months[i];
+            visibleRange[0] = i;
+          }
+
+          if (!months[i].visible) {
+            this.$emit('month-show', {
+              date: months[i].date,
+              title: months[i].title,
+            });
+          }
         }
 
         height += heights[i];
       }
 
       months.forEach((month, index) => {
-        month.visible = index >= visibleIndex - 1 && index <= visibleIndex + 1;
+        month.visible =
+          index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
       });
 
       /* istanbul ignore else */
diff --git a/src/calendar/test/__snapshots__/demo.spec.js.snap b/src/calendar/test/__snapshots__/demo.spec.js.snap
index 74018afa8..b0a56dda3 100644
--- a/src/calendar/test/__snapshots__/demo.spec.js.snap
+++ b/src/calendar/test/__snapshots__/demo.spec.js.snap
@@ -139,7 +139,40 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-calendar__month" style="padding-bottom: 0px;">
           <div class="van-calendar__month-title">2012年3月</div>
-          <div></div>
+          <div role="grid" class="van-calendar__days">
+            <div class="van-calendar__month-mark">3</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
+            <div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
+            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
+          </div>
         </div>
       </div>
       <div class="van-calendar__footer"></div>