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: {