feat(Calendar): add click-subtitle event (#8981)

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);
+          }}
         />
         <div ref={bodyRef} class={bem('body')} onScroll={onScroll}>
           {months.value.map(renderMonth)}

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 <div class={bem('header-subtitle')}>{title}</div>;
+        return (
+          <div class={bem('header-subtitle')} onClick={onClickSubtitle}>
+            {title}
+          </div>
+        );
       }
     };
 

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
 

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
 

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();
+});