feat(Calendar): add month-title slot (#11500)

* feat(Calendar): add month-title slot

* chore: update snap

* chore: update snap

packages/vant/src/calendar/Calendar.tsx

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

packages/vant/src/calendar/CalendarMonth.tsx

@@ -185,7 +185,16 @@ export default defineComponent({
 
     const renderTitle = () => {
       if (props.showMonthTitle) {
-        return <div class={bem('month-title')}>{title.value}</div>;
+        return (
+          <div class={bem('month-title')}>
+            {slots['month-title']
+              ? slots['month-title']({
+                  date: props.date,
+                  text: title.value,
+                })
+              : title.value}
+          </div>
+        );
       }
     };
 

packages/vant/src/calendar/README.md

@@ -335,6 +335,7 @@ Following props are supported when the type is multiple
 | --- | --- | --- |
 | title | Custom title | - |
 | subtitle `v3.1.3` | Custom subtitle | _{ text: string, date?: Date }_ |
+| month-title `v4.0.9` | Custom title of every month | _{ text: string, date: Date }_ |
 | footer | Custom footer | - |
 | confirm-text `v3.2.6` | Custom confirm text | _{ disabled: boolean }_ |
 | top-info `v3.0.17` | Custom top info of day | _day: Day_ |

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

@@ -341,6 +341,7 @@ export default {
 | --- | --- | --- |
 | title | 自定义标题 | - |
 | subtitle `v3.1.3` | 自定义日历副标题 | _{ text: string, date?: Date }_ |
+| month-title `v4.0.9` | 自定义每个月份的小标题 | _{ text: string, date: Date }_ |
 | footer | 自定义底部区域内容 | - |
 | confirm-text `v3.2.6` | 自定义确认按钮的内容 | _{ disabled: boolean }_ |
 | top-info `v3.0.17` | 自定义日期上方的提示信息 | _day: Day_ |

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

@@ -950,6 +950,12 @@ exports[`should render confirm-text slot correctly 1`] = `
 </button>
 `;
 
+exports[`should render month-title slot correctly 1`] = `
+<div class="van-calendar__month-title">
+  Custom Month Title
+</div>
+`;
+
 exports[`should render subtitle slot with params 1`] = `
 <div class="van-calendar__header-subtitle">
   Custom Subtitle

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

@@ -386,6 +386,25 @@ test('should render subtitle slot with params', async () => {
   ).toMatchSnapshot();
 });
 
+test('should render month-title slot correctly', async () => {
+  const wrapper = mount(Calendar, {
+    props: {
+      minDate,
+      maxDate: new Date(2010, 1, 20),
+      poppable: false,
+      defaultDate: minDate,
+      lazyRender: false,
+    },
+    slots: {
+      'month-title': () => ` Custom Month Title`,
+    },
+  });
+
+  await later();
+
+  expect(wrapper.find('.van-calendar__month-title').html()).toMatchSnapshot();
+});
+
 test('should reset when type changed', async () => {
   const wrapper = mount(Calendar, {
     props: {