From f5a1a2c6b09cf04555275834599842ef7e7beeec Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 21 Jan 2023 23:03:36 +0800
Subject: [PATCH] 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       |  2 +-
 packages/vant/src/calendar/CalendarMonth.tsx  | 11 ++++++++++-
 packages/vant/src/calendar/README.md          |  1 +
 packages/vant/src/calendar/README.zh-CN.md    |  1 +
 .../test/__snapshots__/index.spec.ts.snap     |  6 ++++++
 packages/vant/src/calendar/test/index.spec.ts | 19 +++++++++++++++++++
 6 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx
index a3d40e1e6..e3347386f 100644
--- a/packages/vant/src/calendar/Calendar.tsx
+++ b/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}
diff --git a/packages/vant/src/calendar/CalendarMonth.tsx b/packages/vant/src/calendar/CalendarMonth.tsx
index 5148e45f3..3d4eb954a 100644
--- a/packages/vant/src/calendar/CalendarMonth.tsx
+++ b/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>
+        );
       }
     };
 
diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md
index 541df1aec..ac3d74b27 100644
--- a/packages/vant/src/calendar/README.md
+++ b/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_ |
diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md
index 862431e85..c368a8457 100644
--- a/packages/vant/src/calendar/README.zh-CN.md
+++ b/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_ |
diff --git a/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap
index 6f4657979..cce17f342 100644
--- a/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap
+++ b/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
diff --git a/packages/vant/src/calendar/test/index.spec.ts b/packages/vant/src/calendar/test/index.spec.ts
index 2975ebb8c..69289dc2a 100644
--- a/packages/vant/src/calendar/test/index.spec.ts
+++ b/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: {