feat(Calendar): support text slot (#13127)

Co-authored-by: inottn <inottn@outlook.com>

packages/vant/src/calendar/Calendar.tsx

@@ -518,7 +518,12 @@ export default defineComponent({
       const showMonthTitle = index !== 0 || !props.showSubtitle;
       return (
         <CalendarMonth
-          v-slots={pick(slots, ['top-info', 'bottom-info', 'month-title'])}
+          v-slots={pick(slots, [
+            'top-info',
+            'bottom-info',
+            'month-title',
+            'text',
+          ])}
           ref={canSwitch.value ? currentMonthRef : setMonthRefs(index)}
           date={date}
           currentDate={currentDate.value}

packages/vant/src/calendar/CalendarDay.tsx

@@ -95,11 +95,15 @@ export default defineComponent({
       }
     };
 
+    const renderText = () => {
+      return slots.text ? slots.text(props.item) : props.item.text;
+    };
+
     const renderContent = () => {
       const { item, color, rowHeight } = props;
-      const { type, text } = item;
+      const { type } = item;
 
-      const Nodes = [renderTopInfo(), text, renderBottomInfo()];
+      const Nodes = [renderTopInfo(), renderText(), renderBottomInfo()];
 
       if (type === 'selected') {
         return (

packages/vant/src/calendar/CalendarMonth.tsx

@@ -261,7 +261,7 @@ export default defineComponent({
 
     const renderDay = (item: CalendarDayItem, index: number) => (
       <CalendarDay
-        v-slots={pick(slots, ['top-info', 'bottom-info'])}
+        v-slots={pick(slots, ['top-info', 'bottom-info', 'text'])}
         item={item}
         index={index}
         color={props.color}

packages/vant/src/calendar/README.md

@@ -353,6 +353,7 @@ Following props are supported when the type is multiple
 | confirm-text | Custom confirm text | _{ disabled: boolean }_ |
 | top-info | Custom top info of day | _day: Day_ |
 | bottom-info | Custom bottom info of day | _day: Day_ |
+| text | Custom text of day | _day: Day_ |
 | prev-month | Custom previous month button | _{ disabled: boolean }_ |
 | prev-year | Custom previous year button | _{ disabled: boolean }_ |
 | next-month | Custom next month button | _{ disabled: boolean }_ |

packages/vant/src/calendar/README.zh-CN.md

@@ -359,6 +359,7 @@ export default {
 | confirm-text | 自定义确认按钮的内容 | _{ disabled: boolean }_ |
 | top-info | 自定义日期上方的提示信息 | _day: Day_ |
 | bottom-info | 自定义日期下方的提示信息 | _day: Day_ |
+| text | 自定义日期内容 | _day: Day_ |
 | prev-month | 自定义上个月按钮 | _{ disabled: boolean }_ |
 | prev-year | 自定义上一年按钮 | _{ disabled: boolean }_ |
 | next-month | 自定义下个月按钮 | _{ disabled: boolean }_ |

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

@@ -874,7 +874,7 @@ exports[`should render title、footer、subtitle slot correctly 1`] = `
 </div>
 `;
 
-exports[`should render top-info and bottom-info slot correctly 1`] = `
+exports[`should render top-info, bottom-info and text slot correctly 1`] = `
 <div
   role="gridcell"
   style="margin-left: 71.42857142857143%;"
@@ -883,7 +883,7 @@ exports[`should render top-info and bottom-info slot correctly 1`] = `
   <div class="van-calendar__top-info">
     top: 1
   </div>
-  1
+  text: 1
   <div class="van-calendar__bottom-info">
     bottom: 1
   </div>

packages/vant/src/calendar/test/index.spec.ts

@@ -605,7 +605,7 @@ test('close event', async () => {
   expect(onClose).toHaveBeenCalledTimes(1);
 });
 
-test('should render top-info and bottom-info slot correctly', async () => {
+test('should render top-info, bottom-info and text slot correctly', async () => {
   const wrapper = mount(Calendar, {
     props: {
       minDate,
@@ -617,6 +617,7 @@ test('should render top-info and bottom-info slot correctly', async () => {
     slots: {
       'top-info': (item) => 'top: ' + item.text,
       'bottom-info': (item) => 'bottom: ' + item.text,
+      text: (item) => 'text: ' + item.text,
     },
   });