docs(Calendar): add enUS document

src/calendar/README.md

@@ -1,5 +1,9 @@
 # Calendar
 
+### Intro
+
+Calendar component for selecting dates or date ranges
+
 ### Install
 
 ``` javascript
@@ -11,10 +15,162 @@ Vue.use(Calendar);
 
 ## Usage
 
-### Basic Usage
+### Select Single Date
+
+The `confirm` event will be triggered after the date selection is completed
 
 ```html
-<van-calendar v-model="checked" />
+<van-cell title="Select Single Date" :value="date" @click="show = true" />
+
+<van-calendar v-model="show" @confirm="onConfirm" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      date: '',
+      show: false
+    };
+  },
+
+  methods: {
+    formatDate() {
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    onConfirm(date) {
+      const [start, end] = date;
+      this.show = false;
+      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
+    }
+  }
+}
+```
+
+### Select Date Range
+
+You can select a date range after setting `type` to` range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time.
+
+```html
+<van-cell title="Select Date Range" :value="date" @click="show = true" />
+
+<van-calendar v-model="show" type="range" @confirm="onConfirm" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      date: []
+    };
+  },
+  methods: {
+    onConfirm(date) {
+      this.show = false;
+      this.date = date;
+    }
+  }
+}
+```
+
+### Quick Select
+
+Set `show-confirm` to` false` to hide the confirm button. In this case, the `confirm` event will be triggered immediately after the selection is completed.
+
+```html
+<van-calendar v-model="show" :show-confirm="false" />
+```
+
+### Custom Date Range
+
+Use `min-date` and `max-date` to custom date range
+
+```html
+<van-calendar
+  v-model="show"
+  :min-date="minDate"
+  :max-date="maxDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+      minDate: new Date(2010, 0, 1),
+      maxDate: new Date(2010, 0, 31)
+    };
+  }
+};
+```
+
+### Custom Confirm Text
+
+Use `confirm-text` and `confirm-disabled-text` to custom confirm text
+
+```html
+<van-calendar
+  v-model="show"
+  type="range"
+  confirm-text="OK"
+  confirm-disabled-text="Select End Time"
+/>
+```
+
+### Custom Day Text
+
+Use `formatter` to custom day text
+
+```html
+<van-calendar
+  v-model="show"
+  type="range"
+  :formatter="formatter"
+/>
+```
+
+```js
+export default {
+  methods: {
+    formatter(day) {
+      const month = day.date.getMonth() + 1;
+      const date = day.date.getDate();
+
+      if (month === 5) {
+        if (date === 1) {
+          day.topInfo = 'Labor Day';
+        } else if (date === 4) {
+          day.topInfo = 'Youth Day';
+        } else if (date === 11) {
+          day.text = 'Today';
+        }
+      }
+
+      if (day.type === 'start') {
+        day.bottomInfo = 'In';
+      } else if (day.type === 'end') {
+        day.bottomInfo = 'Out';
+      }
+
+      return day;
+    }
+  }
+}
+```
+
+### Tiled display
+
+Set `poppable` to `false`, the calendar will be displayed directly on the page instead of appearing as a popup
+
+```html
+<van-calendar
+  title="Calendar"
+  :popable="false"
+  :show-confirm="false"
+  :style="{ height: '500px' }"
+/>
 ```
 
 ## API
@@ -23,25 +179,50 @@ Vue.use(Calendar);
 
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
+| v-model | Whether to show calendar | *boolean* | `false` | - |
+| type | Type，can be set to `single` `range` | *string* | `single` | - |
+| title | Title of calendar | *string* | `Calendar` | - |
+| min-date | Min date | *Date*  | Today | - |
+| max-date | Max date | *Date*  | Six months after the today | - |
+| default-date | Default selected date | *Date \| Date[]* | Today | - |
+| row-height | Row height | *number* | `64` | - |
+| formatter | Day formatter | *(day: Day) => Day* | - | - |
+| poppable | Whether to show the calendar inside a popup | *boolean* | `true` | - |
+| show-mark | Whether to show background month mark | *boolean* | `true` | - |
+| show-confirm | Whether to show confirm button | *boolean* | `true` | - |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | - |
+| confirm-text | Confirm button text | *string* | `Confirm` | - |
+| confirm-disabled-text | Confirm button text when disabled | *string* | `Confirm` | - |
 
-### Props
+### Data Structure of Day
 
-| Attribute | Description | Type | Default | Version |
-|------|------|------|------|------|
+| Key | Description | Type |
+|------|------|------|
+| date | Date | *Date* |
+| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | *string* |
+| text | Text | *string* |
+| topInfo | Top info | *string* |
+| bottomInfo | Bottom info | *string* |
+| className | Extra className | *string* |
 
 ### Events
 
-| Event | Description | Parameters |
+| Event | Description | Arguments |
 |------|------|------|
+| select | Triggered when select date | value: Date \| Date[] |
+| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | value: Date \| Date[] |
 
 ### Slots
 
-| Name | Description | SlotProps |
-|------|------|------|
+| Name | Description |
+|------|------|
+| title | Custom title |
+| footer | Custom fotter |
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Canlendar instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods
 
 | Name | Description | Attribute | Return value |
 |------|------|------|------|
+| reset | Reset selected date to default date | - | - |

src/calendar/README.zh-CN.md

@@ -29,7 +29,6 @@ Vue.use(Calendar);
 export default {
   data() {
     return {
-      // 当前选中的日期
       date: '',
       show: false
     };
@@ -136,10 +135,10 @@ export default {
 export default {
   methods: {
     formatter(day) {
-      const month = day.date.getMonth();
+      const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
-      if (month === 4) {
+      if (month === 5) {
         if (date === 1) {
           day.topInfo = '劳动节';
         } else if (date === 4) {

src/calendar/demo/index.vue

@@ -82,6 +82,11 @@
 export default {
   i18n: {
     'zh-CN': {
+      in: '入店',
+      out: '离店',
+      today: '今天',
+      laborDay: '劳动节',
+      youthDay: '五四青年节',
       calendar: '日历',
       selectSingle: '选择单个日期',
       selectRange: '选择日期区间',
@@ -95,6 +100,11 @@ export default {
       tiledDisplay: '平铺展示'
     },
     'en-US': {
+      in: 'In',
+      out: 'Out',
+      today: 'Today',
+      laborDay: 'Labor day',
+      youthDay: 'Youth Day',
       calendar: 'Calendar',
       selectSingle: 'Select Single Date',
       selectRange: 'Select Date Range',
@@ -169,23 +179,23 @@ export default {
     },
 
     dayFormatter(day) {
-      const month = day.date.getMonth();
+      const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
-      if (month === 4) {
+      if (month === 5) {
         if (date === 1) {
-          day.topInfo = '劳动节';
+          day.topInfo = this.$t('laborDay');
         } else if (date === 4) {
-          day.topInfo = '五四青年节';
+          day.topInfo = this.$t('youthDay');
         } else if (date === 11) {
-          day.text = '今天';
+          day.text = this.$t('today');
         }
       }
 
       if (day.type === 'start') {
-        day.bottomInfo = '入住';
+        day.bottomInfo = this.$t('in');
       } else if (day.type === 'end') {
-        day.bottomInfo = '离店';
+        day.bottomInfo = this.$t('out');
       }
 
       return day;

src/calendar/index.less

@@ -8,6 +8,10 @@
 
   &__popup {
     height: 80%;
+
+    .van-popup__close-icon {
+      top: 13px;
+    }
   }
 
   &__header {
@@ -59,8 +63,8 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    z-index: -1;
-    color: @gray-2;
+    z-index: 0;
+    color: fade(@gray-2, 80%);
     font-size: 160px;
     transform: translate(-50%, -50%);
     pointer-events: none;
@@ -113,6 +117,10 @@
     left: 0;
     font-size: @font-size-xs;
     line-height: 14px;
+
+    @media (max-width: 350px) {
+      font-size: 9px;
+    }
   }
 
   &__top-info {