diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index f7b9ad01f..c0e19086c 100644
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../../utils';
-import { t, bem, compareDay, formatMonthTitle } from '../utils';
+import { t, bem, compareDay, formatMonthTitle, ROW_HEIGHT } from '../utils';
 import { getMonthEndDay } from '../../datetime-picker/utils';
 
 const [createComponent] = createNamespace('calendar-month');
@@ -123,6 +123,20 @@ export default createComponent({
       }
     },
 
+    getDayStyle(index) {
+      const style = {};
+
+      if (index === 0) {
+        style.marginLeft = `${(100 * this.offset) / 7}%`;
+      }
+
+      if (this.rowHeight !== ROW_HEIGHT) {
+        style.height = `${this.rowHeight}px`;
+      }
+
+      return style;
+    },
+
     genTitle() {
       if (this.showTitle) {
         return <div class={bem('month-title')}>{this.title}</div>;
@@ -148,13 +162,7 @@ export default createComponent({
 
     genDay(item, index) {
       const { type } = item;
-
-      let style;
-      if (index === 0) {
-        style = {
-          marginLeft: `${(100 * this.offset) / 7}%`
-        };
-      }
+      const style = this.getDayStyle(index);
 
       const onClick = () => {
         if (type !== 'disabled') {
diff --git a/src/calendar/index.js b/src/calendar/index.js
index 0a8b657c1..92df220d6 100644
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@@ -6,7 +6,9 @@ import {
   getNextDay,
   compareDay,
   compareMonth,
-  createComponent
+  createComponent,
+  ROW_HEIGHT,
+  RENDER_OFFSET
 } from './utils';
 
 import Button from '../button';
@@ -38,7 +40,7 @@ export default createComponent({
     },
     rowHeight: {
       type: Number,
-      default: 64
+      default: ROW_HEIGHT
     },
     showMark: {
       type: Boolean,
@@ -98,10 +100,13 @@ export default createComponent({
       }
     },
 
+    // calculate the position of the elements
+    // and find the elements that needs to be rendered
     onScroll() {
       const { body, months } = this.$refs;
-      const top = getScrollTop(body);
-      const bottom = top + this.bodyHeight;
+      const scrollTop = getScrollTop(body);
+      const top = scrollTop - RENDER_OFFSET;
+      const bottom = scrollTop + this.bodyHeight + RENDER_OFFSET;
       const heights = months.map(item => item.height);
 
       let height = 0;
diff --git a/src/calendar/utils.ts b/src/calendar/utils.ts
index ff2af104c..91f84d2c2 100644
--- a/src/calendar/utils.ts
+++ b/src/calendar/utils.ts
@@ -5,6 +5,9 @@ const [createComponent, bem, t] = createNamespace('calendar');
 
 export { createComponent, bem, t };
 
+export const ROW_HEIGHT = 64;
+export const RENDER_OFFSET = 150;
+
 export function formatMonthTitle(date: Date) {
   return t('monthTitle', date.getFullYear(), padZero(date.getMonth() + 1));
 }