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

src/calendar/Calendar.tsx

@@ -416,6 +416,7 @@ export default defineComponent({
       const showMonthTitle = index !== 0 || !props.showSubtitle;
       return (
         <CalendarMonth
+          v-slots={pick(slots, ['top-info', 'bottom-info'])}
           ref={setMonthRefs(index)}
           date={date}
           currentDate={state.currentDate}

src/calendar/CalendarDay.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
 
   emits: ['click'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const style = computed(() => {
       const { item, index, color, offset, rowHeight } = props;
       const style: CSSProperties = {
@@ -84,17 +84,37 @@ export default defineComponent({
       }
     };
 
+    const renderTopInfo = () => {
+      const { topInfo } = props.item;
+
+      if (topInfo || slots['top-info']) {
+        return (
+          <div class={bem('top-info')}>
+            {slots['top-info'] ? slots['top-info'](props.item) : topInfo}
+          </div>
+        );
+      }
+    };
+
+    const renderBottomInfo = () => {
+      const { bottomInfo } = props.item;
+
+      if (bottomInfo || slots['bottom-info']) {
+        return (
+          <div class={bem('bottom-info')}>
+            {slots['bottom-info']
+              ? slots['bottom-info'](props.item)
+              : bottomInfo}
+          </div>
+        );
+      }
+    };
+
     const renderContent = () => {
       const { item, color, rowHeight } = props;
-      const { type, text, topInfo, bottomInfo } = item;
+      const { type, text } = item;
 
-      const TopInfo = topInfo && <div class={bem('top-info')}>{topInfo}</div>;
+      const Nodes = [renderTopInfo(), text, renderBottomInfo()];
-
-      const BottomInfo = bottomInfo && (
-        <div class={bem('bottom-info')}>{bottomInfo}</div>
-      );
-
-      const Nodes = [TopInfo, text, BottomInfo];
 
       if (type === 'selected') {
         return (

src/calendar/CalendarMonth.tsx

@@ -1,7 +1,7 @@
 import { ref, computed, PropType, defineComponent } from 'vue';
 
 // Utils
-import { addUnit, setScrollTop, createNamespace } from '../utils';
+import { addUnit, setScrollTop, createNamespace, pick } from '../utils';
 import { getMonthEndDay } from '../datetime-picker/utils';
 import {
   t,
@@ -55,7 +55,7 @@ export default defineComponent({
 
   emits: ['click', 'update-height'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const [visible, setVisible] = useToggle();
     const daysRef = ref<HTMLElement>();
     const monthRef = ref<HTMLElement>();
@@ -230,6 +230,7 @@ export default defineComponent({
 
     const renderDay = (item: CalendarDayItem, index: number) => (
       <CalendarDay
+        v-slots={pick(slots, ['top-info', 'bottom-info'])}
         item={item}
         index={index}
         color={props.color}

src/calendar/README.md

@@ -288,7 +288,7 @@ Following props are supported when the type is range
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| max-range | Number of selectable days | _number \| string_ | Unlimitied |
+| max-range | Number of selectable days | _number \| string_ | Unlimited |
 | range-prompt | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
 | allow-same-day | Whether the start and end time of the range is allowed on the same day | _boolean_ | `false` |
 
@@ -298,7 +298,7 @@ Following props are supported when the type is multiple
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| max-range | Max count of selectable days | _number \| string_ | Unlimitied |
+| max-range | Max count of selectable days | _number \| string_ | Unlimited |
 | range-prompt | Error message when exceeded max count | _string_ | `Choose no more than xx days` |
 
 ### Data Structure of Day
@@ -327,10 +327,12 @@ Following props are supported when the type is multiple
 
 ### Slots
 
-| Name   | Description   |
+| Name                  | Description               | SlotProps  |
-| ------ | ------------- |
+| --------------------- | ------------------------- | ---------- |
-| title  | Custom title  |
+| title                 | Custom title              | -          |
-| footer | Custom fotter |
+| footer                | Custom footer             | -          |
+| top-info `v3.0.17`    | Custom top info of day    | _day: Day_ |
+| bottom-info `v3.0.17` | Custom bottom info of day | _day: Day_ |
 
 ### Methods
 

src/calendar/README.zh-CN.md

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

src/calendar/test/__snapshots__/index.spec.ts.snap

@@ -924,6 +924,21 @@ exports[`row-height prop 1`] = `
 </div>
 `;
 
+exports[`should render top-info and bottom-info slot correctly 1`] = `
+<div role="gridcell"
+     style="margin-left: 71.42857142857143%;"
+     class="van-calendar__day van-calendar__day--disabled"
+>
+  <div class="van-calendar__top-info">
+    top: 1
+  </div>
+  1
+  <div class="van-calendar__bottom-info">
+    bottom: 1
+  </div>
+</div>
+`;
+
 exports[`title & footer slot 1`] = `
 <div class="van-calendar">
   <div class="van-calendar__header">

src/calendar/test/index.spec.ts

@@ -533,3 +533,23 @@ test('close event', async () => {
 
   expect(onClose).toHaveBeenCalledTimes(1);
 });
+
+test('should render top-info and bottom-info slot correctly', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      minDate,
+      maxDate,
+      poppable: false,
+      defaultDate: minDate,
+      lazyRender: false,
+    },
+    slots: {
+      'top-info': (item) => 'top: ' + item.text,
+      'bottom-info': (item) => 'bottom: ' + item.text,
+    },
+  });
+
+  await later();
+
+  expect(wrapper.find('.van-calendar__day').html()).toMatchSnapshot();
+});