feat(Calendar): add formatter prop

packages/vant-cli/site/desktop/components/Container.vue

@@ -27,10 +27,6 @@ export default {
 
   &--with-simulator {
     padding-right: @van-doc-simulator-width + @van-doc-padding;
-
-    @media (max-width: 1300px) {
-      padding-right: @van-doc-simulator-small-width + @van-doc-padding;
-    }
   }
 }
 </style>

packages/vant-cli/site/desktop/components/Simulator.vue

@@ -59,11 +59,6 @@ export default {
   border-radius: 6px;
   box-shadow: #ebedf0 0 4px 12px;
 
-  @media (max-width: 1300px) {
-    width: @van-doc-simulator-small-width;
-    min-width: @van-doc-simulator-small-width;
-  }
-
   @media (max-width: 1100px) {
     right: auto;
     left: 750px;

src/calendar/README.zh-CN.md

@@ -120,6 +120,60 @@ export default {
 />
 ```
 
+### 自定义日期文案
+
+通过传入`formatter`函数来对日历上每一格的内容进行格式化
+
+```html
+<van-calendar
+  v-model="show"
+  type="range"
+  :formatter="formatter"
+/>
+```
+
+```js
+export default {
+  methods: {
+    formatter(day) {
+      const month = day.date.getMonth();
+      const date = day.date.getDate();
+
+      if (month === 4) {
+        if (date === 1) {
+          day.topInfo = '劳动节';
+        } else if (date === 4) {
+          day.topInfo = '五四青年节';
+        } else if (date === 11) {
+          day.text = '今天';
+        }
+      }
+
+      if (day.type === 'start') {
+        day.bottomInfo = '入住';
+      } else if (day.type === 'end') {
+        day.bottomInfo = '离店';
+      }
+
+      return day;
+    }
+  }
+}
+```
+
+### 平铺展示
+
+将`poppable`设置为`false`，日历会直接展示在页面内，而不是以弹层的形式出现
+
+```html
+<van-calendar
+  title="日历"
+  :popable="false"
+  :show-confirm="false"
+  :style="{ height: '500px' }"
+/>
+```
+
 ## API
 
 ### Props
@@ -133,6 +187,7 @@ export default {
 | max-date | 最大日期 | *Date*  | 当前日期的六个月后 | - |
 | default-date | 默认选中的日期 | *Date \| Date[]* | 今天 | - |
 | row-height | 日期行高 | *number* | `64` | - |
+| formatter | 日期格式化函数 | *(day: Day) => Day* | - | - |
 | poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | - |
 | show-mark | 是否显示月份背景水印 | *boolean* | `true` | - |
 | show-confirm | 是否展示确认按钮 | *boolean* | `true` | - |
@@ -140,6 +195,19 @@ export default {
 | confirm-text | 确认按钮的文字 | *string* | `确定` | - |
 | confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | - |
 
+### Day 数据结构
+
+日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
+
+| 键名 | 说明 | 类型 |
+|------|------|------|
+| date | 日期对应的 Date 对象 | *Date* |
+| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | *string* |
+| text | 中间显示的文字 | *string* |
+| topInfo | 上方的提示信息 | *string* |
+| bottomInfo | 下方的提示信息 | *string* |
+| className | 额外类名 | *string* |
+
 ### Events
 
 | 事件名 | 说明 | 回调参数 |

src/calendar/components/Month.js

@@ -13,6 +13,7 @@ export default createComponent({
     showMark: Boolean,
     showTitle: Boolean,
     rowHeight: Number,
+    formatter: Function,
     currentDate: [Date, Array]
   },
 
@@ -56,14 +57,22 @@ export default createComponent({
       const year = this.date.getFullYear();
       const month = this.date.getMonth();
 
-      for (let i = 1; i <= this.totalDay; i++) {
+      for (let day = 1; day <= this.totalDay; day++) {
-        const date = new Date(year, month, i);
+        const date = new Date(year, month, day);
+        const type = this.getDayType(date);
 
-        days.push({
+        let config = {
-          day: i,
           date,
-          type: this.getDayType(date)
+          type,
-        });
+          text: day,
+          bottomInfo: this.getBottomInfo(type)
+        };
+
+        if (this.formatter) {
+          config = this.formatter(config);
+        }
+
+        days.push(config);
       }
 
       return days;
@@ -113,12 +122,12 @@ export default createComponent({
       }
     },
 
-    getLabel(item) {
+    getBottomInfo(type) {
-      if (item.type === 'start') {
+      if (type === 'start') {
         return t('start');
       }
 
-      if (item.type === 'end') {
+      if (type === 'end') {
         return t('end');
       }
     },
@@ -161,7 +170,7 @@ export default createComponent({
     },
 
     genDay(item, index) {
-      const { type } = item;
+      const { type, topInfo, bottomInfo } = item;
       const style = this.getDayStyle(index);
 
       const onClick = () => {
@@ -173,18 +182,26 @@ export default createComponent({
       if (type === 'selected') {
         return (
           <div style={style} class={bem('day')} onClick={onClick}>
-            <div class={bem('selected-day')}>{item.day}</div>
+            <div class={bem('selected-day')}>{item.text}</div>
           </div>
         );
       }
 
-      const label = this.getLabel(item);
+      const TopInfo = topInfo && <div class={bem('top-info')}>{topInfo}</div>;
-      const Label = label && <div class={bem('day-label')}>{label}</div>;
+
+      const BottomInfo = bottomInfo && (
+        <div class={bem('bottom-info')}>{bottomInfo}</div>
+      );
 
       return (
-        <div style={style} class={bem('day', [type])} onClick={onClick}>
+        <div
-          {item.day}
+          style={style}
-          {Label}
+          class={[bem('day', [type]), item.className]}
+          onClick={onClick}
+        >
+          {TopInfo}
+          {item.text}
+          {BottomInfo}
         </div>
       );
     }

src/calendar/demo/index.vue

@@ -46,6 +46,22 @@
         :value="formatRange(date.customConfirm)"
         @click="show('range', 'customConfirm')"
       />
+
+      <van-cell
+        is-link
+        :title="$t('customDayText')"
+        :value="formatRange(date.customDayText)"
+        @click="show('range', 'customDayText')"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('tiledDisplay')">
+      <van-calendar
+        :title="$t('calendar')"
+        :poppable="false"
+        :show-confirm="false"
+        :style="{ height: '500px' }"
+      />
     </demo-block>
 
     <van-calendar
@@ -53,6 +69,7 @@
       :type="type"
       :min-date="minDate"
       :max-date="maxDate"
+      :formatter="formatter"
       :show-confirm="showConfirm"
       :confirm-text="confirmText"
       :confirm-disabled-text="confirmDisabledText"
@@ -65,24 +82,30 @@
 export default {
   i18n: {
     'zh-CN': {
+      calendar: '日历',
       selectSingle: '选择单个日期',
       selectRange: '选择日期区间',
       quickSelect: '快捷选择',
       confirmText: '完成',
-      customRange: '自定义范围',
+      customRange: '自定义日期范围',
       customConfirm: '自定义按钮文字',
+      customDayText: '自定义日期文案',
       customCalendar: '自定义日历',
-      confirmDisabledText: '请选择结束时间'
+      confirmDisabledText: '请选择结束时间',
+      tiledDisplay: '平铺展示'
     },
     'en-US': {
+      calendar: 'Calendar',
       selectSingle: 'Select Single Date',
       selectRange: 'Select Date Range',
       quickSelect: 'Quick Select',
       confirmText: 'OK',
-      customRange: 'Custom Range',
+      customRange: 'Custom Date Range',
       customConfirm: 'Custom Confirm Text',
+      customDayText: 'Custom Day Text',
       customCalendar: 'Custom Calendar',
-      confirmDisabledText: 'Select End Time'
+      confirmDisabledText: 'Select End Time',
+      tiledDisplay: 'Tiled display'
     }
   },
 
@@ -94,11 +117,13 @@ export default {
         quickSelect1: null,
         quickSelect2: [],
         customConfirm: [],
-        customRange: null
+        customRange: null,
+        customDayText: []
       },
       type: 'single',
       minDate: undefined,
       maxDate: undefined,
+      formatter: undefined,
       showConfirm: false,
       showCalendar: false,
       confirmText: undefined,
@@ -110,6 +135,7 @@ export default {
     resetSettings() {
       this.minDate = undefined;
       this.maxDate = undefined;
+      this.formatter = undefined;
       this.showConfirm = true;
       this.confirmText = undefined;
       this.confirmDisabledText = undefined;
@@ -134,9 +160,37 @@ export default {
           this.minDate = new Date(2010, 0, 1);
           this.maxDate = new Date(2010, 0, 31);
           break;
+        case 'customDayText':
+          this.minDate = new Date(2010, 4, 1);
+          this.maxDate = new Date(2010, 4, 31);
+          this.formatter = this.dayFormatter;
+          break;
       }
     },
 
+    dayFormatter(day) {
+      const month = day.date.getMonth();
+      const date = day.date.getDate();
+
+      if (month === 4) {
+        if (date === 1) {
+          day.topInfo = '劳动节';
+        } else if (date === 4) {
+          day.topInfo = '五四青年节';
+        } else if (date === 11) {
+          day.text = '今天';
+        }
+      }
+
+      if (day.type === 'start') {
+        day.bottomInfo = '入住';
+      } else if (day.type === 'end') {
+        day.bottomInfo = '离店';
+      }
+
+      return day;
+    },
+
     formatDate(date) {
       if (date) {
         return `${date.getMonth() + 1}/${date.getDate()}`;

src/calendar/index.js

@@ -19,6 +19,7 @@ export default createComponent({
   props: {
     title: String,
     value: Boolean,
+    formatter: Function,
     defaultDate: [Date, Array],
     confirmText: String,
     confirmDisabledText: String,
@@ -221,11 +222,12 @@ export default createComponent({
         <Month
           ref="months"
           refInFor
-          type={this.type}
           date={date}
+          type={this.type}
           minDate={this.minDate}
           maxDate={this.maxDate}
           showMark={this.showMark}
+          formatter={this.formatter}
           rowHeight={this.rowHeight}
           showTitle={index !== 0}
           currentDate={this.currentDate}

src/calendar/index.less

@@ -71,6 +71,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    text-align: center;
   }
 
   &__day {
@@ -105,14 +106,21 @@
     }
   }
 
-  &__day-label {
+  &__top-info,
+  &__bottom-info {
     position: absolute;
     right: 0;
-    bottom: 6px;
     left: 0;
     font-size: @font-size-xs;
     line-height: 14px;
-    text-align: center;
+  }
+
+  &__top-info {
+    top: 6px;
+  }
+
+  &__bottom-info {
+    bottom: 6px;
   }
 
   &__selected-day {