diff --git a/src/calendar/Calendar.tsx b/src/calendar/Calendar.tsx
index b42566cc6..a7ed929c0 100644
--- a/src/calendar/Calendar.tsx
+++ b/src/calendar/Calendar.tsx
@@ -115,8 +115,9 @@ export default defineComponent({
'confirm',
'unselect',
'month-show',
- 'update:show',
'over-range',
+ 'update:show',
+ 'click-subtitle',
],
setup(props, { emit, slots }) {
@@ -495,6 +496,9 @@ export default defineComponent({
showTitle={props.showTitle}
showSubtitle={props.showSubtitle}
firstDayOfWeek={dayOffset.value}
+ onClick-subtitle={(event: MouseEvent) => {
+ emit('click-subtitle', event);
+ }}
/>
{months.value.map(renderMonth)}
diff --git a/src/calendar/CalendarHeader.tsx b/src/calendar/CalendarHeader.tsx
index 30779ae25..896b5648b 100644
--- a/src/calendar/CalendarHeader.tsx
+++ b/src/calendar/CalendarHeader.tsx
@@ -15,7 +15,9 @@ export default defineComponent({
firstDayOfWeek: Number,
},
- setup(props, { slots }) {
+ emits: ['click-subtitle'],
+
+ setup(props, { slots, emit }) {
const renderTitle = () => {
if (props.showTitle) {
const text = props.title || t('title');
@@ -24,10 +26,18 @@ export default defineComponent({
}
};
+ const onClickSubtitle = (event: MouseEvent) => {
+ emit('click-subtitle', event);
+ };
+
const renderSubtitle = () => {
if (props.showSubtitle) {
const title = slots.subtitle ? slots.subtitle() : props.subtitle;
- return ;
+ return (
+
+ );
}
};
diff --git a/src/calendar/README.md b/src/calendar/README.md
index 4793037c2..7507a42d2 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -326,6 +326,7 @@ Following props are supported when the type is multiple
| unselect | Emitted when unselect date when type is multiple | _value: Date_ |
| month-show | Emitted when a month enters the visible area | _{ date: Date, title: string }_ |
| over-range | Emitted when exceeded max range | - |
+| click-subtitle `v3.1.3` | Emitted when clicking the subtitle | _event: MouseEvent_ |
### Slots
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 51131ba59..625800199 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -332,6 +332,7 @@ export default {
| unselect | 当日历组件的 `type` 为 `multiple` 时,取消选中日期时触发 | _value: Date_ |
| month-show | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ |
| over-range | 范围选择超过最多可选天数时触发 | - |
+| click-subtitle `v3.1.3` | 点击日历副标题时触发 | _event: MouseEvent_ |
### Slots
diff --git a/src/calendar/test/index.spec.ts b/src/calendar/test/index.spec.ts
index b9b76b33d..750682199 100644
--- a/src/calendar/test/index.spec.ts
+++ b/src/calendar/test/index.spec.ts
@@ -554,3 +554,18 @@ test('should render top-info and bottom-info slot correctly', async () => {
expect(wrapper.find('.van-calendar__day').html()).toMatchSnapshot();
});
+
+test('should emit click-subtitle event when clicking the subtitle', async () => {
+ const wrapper = mount(Calendar, {
+ props: {
+ minDate,
+ maxDate,
+ poppable: false,
+ lazyRender: false,
+ },
+ });
+
+ await later();
+ wrapper.find('.van-calendar__header-subtitle').trigger('click');
+ expect(wrapper.emitted('click-subtitle')).toBeTruthy();
+});