From 32f6a4ff04a39b362fd12e74e99621352acb94d1 Mon Sep 17 00:00:00 2001
From: inottn <inottn@outlook.com>
Date: Sat, 18 Jan 2025 17:55:40 +0800
Subject: [PATCH] feat(Calendar): add click-overlay event (#13312)

---
 packages/vant/src/calendar/Calendar.tsx       |  4 ++++
 packages/vant/src/calendar/README.md          |  1 +
 packages/vant/src/calendar/README.zh-CN.md    |  1 +
 packages/vant/src/calendar/test/index.spec.ts | 16 ++++++++++++++++
 4 files changed, 22 insertions(+)

diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx
index 6c5a763ad..db1dcccd9 100644
--- a/packages/vant/src/calendar/Calendar.tsx
+++ b/packages/vant/src/calendar/Calendar.tsx
@@ -115,6 +115,7 @@ export default defineComponent({
     'update:show',
     'clickSubtitle',
     'clickDisabledDate',
+    'clickOverlay',
     'panelChange',
   ],
 
@@ -512,6 +513,8 @@ export default defineComponent({
       }
     };
 
+    const onClickOverlay = (event: MouseEvent) => emit('clickOverlay', event);
+
     const updateShow = (value: boolean) => emit('update:show', value);
 
     const renderMonth = (date: Date, index: number) => {
@@ -654,6 +657,7 @@ export default defineComponent({
             closeOnPopstate={props.closeOnPopstate}
             safeAreaInsetTop={props.safeAreaInsetTop}
             closeOnClickOverlay={props.closeOnClickOverlay}
+            onClickOverlay={onClickOverlay}
             onUpdate:show={updateShow}
           />
         );
diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md
index a62ff1c38..6781408ce 100644
--- a/packages/vant/src/calendar/README.md
+++ b/packages/vant/src/calendar/README.md
@@ -340,6 +340,7 @@ Following props are supported when the type is multiple
 | over-range | Emitted when exceeded max range | - |
 | click-subtitle | Emitted when clicking the subtitle | _event: MouseEvent_ |
 | click-disabled-date `v4.7.0` | Emitted when clicking disabled date | _value: Date \| Date[]_ |
+| click-overlay `v4.9.16` | Emitted when overlay is clicked | _event: MouseEvent_ |
 | panel-change | Emitted when switching calendar panel (effective when `switch mode` is not `none`) | _{ date: Date }_ |
 
 ### Slots
diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md
index abf06bc99..a31fd36f4 100644
--- a/packages/vant/src/calendar/README.zh-CN.md
+++ b/packages/vant/src/calendar/README.zh-CN.md
@@ -346,6 +346,7 @@ export default {
 | over-range | 范围选择超过最多可选天数时触发 | - |
 | click-subtitle | 点击日历副标题时触发 | _event: MouseEvent_ |
 | click-disabled-date `v4.7.0` | 点击禁用日期时触发 | _value: Date \| Date[]_ |
+| click-overlay `v4.9.16` | 点击遮罩层时触发 | _event: MouseEvent_ |
 | panel-change | 日历面板切换时触发（`switch-mode` 不为 `none` 时生效） | _{ date: Date }_ |
 
 ### Slots
diff --git a/packages/vant/src/calendar/test/index.spec.ts b/packages/vant/src/calendar/test/index.spec.ts
index 7dcea77b3..72de8b30e 100644
--- a/packages/vant/src/calendar/test/index.spec.ts
+++ b/packages/vant/src/calendar/test/index.spec.ts
@@ -531,6 +531,22 @@ test('popup wrapper', async () => {
   expect(wrapper.find('.van-calendar__popup').style.display).toEqual('none');
 });
 
+test('should trigger click-overlay event when overlay is clicked', async () => {
+  const onClickOverlay = vi.fn();
+  const wrapper = mount(Calendar, {
+    props: {
+      minDate,
+      maxDate,
+      defaultDate: minDate,
+      show: true,
+      onClickOverlay,
+    },
+  });
+
+  wrapper.find('.van-overlay').trigger('click');
+  expect(onClickOverlay).toHaveBeenCalled();
+});
+
 test('set show-mark prop to false', async () => {
   const wrapper = mount(Calendar, {
     props: {