fix(Calendar): incorrect height when position is left or right

src/calendar/README.md

@@ -168,6 +168,18 @@ export default {
 }
 ```
 
+### Custom Position
+
+Use `position` to custom popup position，can be set to `top`、`left`、`right`
+
+```html
+<van-calendar
+  v-model="show"
+  :round="false"
+  position="right"
+/>
+```
+
 ### Tiled display
 
 Set `poppable` to `false`, the calendar will be displayed directly on the page instead of appearing as a popup

src/calendar/README.zh-CN.md

@@ -168,6 +168,18 @@ export default {
 }
 ```
 
+### 自定义弹出位置
+
+通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right`
+
+```html
+<van-calendar
+  v-model="show"
+  :round="false"
+  position="right"
+/>
+```
+
 ### 平铺展示
 
 将`poppable`设置为`false`，日历会直接展示在页面内，而不是以弹层的形式出现

src/calendar/demo/index.vue

@@ -60,6 +60,13 @@
         :value="formatRange(date.customDayText)"
         @click="show('range', 'customDayText')"
       />
+
+      <van-cell
+        is-link
+        :title="$t('customPosition')"
+        :value="formatFullDate(date.customPosition)"
+        @click="show('single', 'customPosition')"
+      />
     </demo-block>
 
     <demo-block :title="$t('tiledDisplay')">
@@ -77,8 +84,10 @@
       v-model="showCalendar"
       :type="type"
       :color="color"
+      :round="round"
       :min-date="minDate"
       :max-date="maxDate"
+      :position="position"
       :formatter="formatter"
       :show-confirm="showConfirm"
       :confirm-text="confirmText"
@@ -108,6 +117,7 @@ export default {
       customRange: '自定义日期范围',
       customConfirm: '自定义按钮文字',
       customDayText: '自定义日期文案',
+      customPosition: '自定义弹出位置',
       customCalendar: '自定义日历',
       confirmDisabledText: '请选择结束时间',
       tiledDisplay: '平铺展示'
@@ -127,6 +137,7 @@ export default {
       customRange: 'Custom Date Range',
       customConfirm: 'Custom Confirm Text',
       customDayText: 'Custom Day Text',
+      customPosition: 'Custom Position',
       customCalendar: 'Custom Calendar',
       confirmDisabledText: 'Select End Time',
       tiledDisplay: 'Tiled display'
@@ -143,12 +154,15 @@ export default {
         customColor: [],
         customConfirm: [],
         customRange: null,
-        customDayText: []
+        customDayText: [],
+        customPosition: null
       },
       type: 'single',
+      round: true,
       color: undefined,
       minDate: undefined,
       maxDate: undefined,
+      position: undefined,
       formatter: undefined,
       showConfirm: false,
       showCalendar: false,
@@ -161,9 +175,11 @@ export default {
 
   methods: {
     resetSettings() {
+      this.round = true;
       this.color = undefined;
       this.minDate = undefined;
       this.maxDate = undefined;
+      this.position = undefined;
       this.formatter = undefined;
       this.showConfirm = true;
       this.confirmText = undefined;
@@ -197,6 +213,10 @@ export default {
           this.maxDate = new Date(2010, 4, 31);
           this.formatter = this.dayFormatter;
           break;
+        case 'customPosition':
+          this.round = false;
+          this.position = 'right';
+          break;
       }
     },
 

src/calendar/index.less

@@ -12,6 +12,11 @@
       height: @calendar-popup-height;
     }
 
+    &.van-popup--left,
+    &.van-popup--right {
+      height: 100%;
+    }
+
     .van-popup__close-icon {
       top: 13px;
     }