feat(Calendar): add top-info、bottom-info slot (#8847)

src/calendar/README.md

@@ -305,10 +305,12 @@ Following props are supported when the type is multiple
 
 ### Slots
 
-| Name   | Description   |
-| ------ | ------------- |
-| title  | Custom title  |
-| footer | Custom fotter |
+| Name                   | Description               | SlotProps  |
+| ---------------------- | ------------------------- | ---------- |
+| title                  | Custom title              | -          |
+| footer                 | Custom footer             | -          |
+| top-info `v2.12.22`    | Custom top info of day    | _day: Day_ |
+| bottom-info `v2.12.22` | Custom bottom info of day | _day: Day_ |
 
 ### Methods
 

src/calendar/README.zh-CN.md

@@ -311,10 +311,12 @@ export default {
 
 ### Slots
 
-| 名称   | 说明               |
-| ------ | ------------------ |
-| title  | 自定义标题         |
-| footer | 自定义底部区域内容 |
+| 名称                   | 说明                     | 参数       |
+| ---------------------- | ------------------------ | ---------- |
+| title                  | 自定义标题               | -          |
+| footer                 | 自定义底部区域内容       | -          |
+| top-info `v2.12.22`    | 自定义日期上方的提示信息 | _day: Day_ |
+| bottom-info `v2.12.22` | 自定义日期下方的提示信息 | _day: Day_ |
 
 ### 方法
 

src/calendar/components/Month.js

@@ -266,8 +266,28 @@ export default createComponent({
       );
     },
 
+    genTopInfo(item) {
+      const slot = this.$scopedSlots['top-info'];
+      if (item.topInfo || slot) {
+        return (
+          <div class={bem('top-info')}>{slot ? slot(item) : item.topInfo}</div>
+        );
+      }
+    },
+
+    genBottomInfo(item) {
+      const slot = this.$scopedSlots['bottom-info'];
+      if (item.bottomInfo || slot) {
+        return (
+          <div class={bem('bottom-info')}>
+            {slot ? slot(item) : item.bottomInfo}
+          </div>
+        );
+      }
+    },
+
     genDay(item, index) {
-      const { type, topInfo, bottomInfo } = item;
+      const { type } = item;
       const style = this.getDayStyle(type, index);
       const disabled = type === 'disabled';
 
@@ -277,12 +297,6 @@ export default createComponent({
         }
       };
 
-      const TopInfo = topInfo && <div class={bem('top-info')}>{topInfo}</div>;
-
-      const BottomInfo = bottomInfo && (
-        <div class={bem('bottom-info')}>{bottomInfo}</div>
-      );
-
       if (type === 'selected') {
         return (
           <div
@@ -300,9 +314,9 @@ export default createComponent({
                 background: this.color,
               }}
             >
-              {TopInfo}
+              {this.genTopInfo(item)}
               {item.text}
-              {BottomInfo}
+              {this.genBottomInfo(item)}
             </div>
           </div>
         );
@@ -316,9 +330,9 @@ export default createComponent({
           tabindex={disabled ? null : -1}
           onClick={onClick}
         >
-          {TopInfo}
+          {this.genTopInfo(item)}
           {item.text}
-          {BottomInfo}
+          {this.genBottomInfo(item)}
         </div>
       );
     },

src/calendar/index.js

@@ -432,6 +432,10 @@ export default createComponent({
           allowSameDay={this.allowSameDay}
           showMonthTitle={showMonthTitle}
           firstDayOfWeek={this.dayOffset}
+          scopedSlots={{
+            'top-info': this.$scopedSlots['top-info'],
+            'bottom-info': this.$scopedSlots['bottom-info'],
+          }}
           onClick={this.onClickDay}
         />
       );