feat(Calendar): add click-disabled-date event (#12274)

* feat(Calendar): add click-disabled-date event

* refactor(Calendar): refactor event name

* test(Calendar): add click-disabled-date event test

---------

Co-authored-by: 骆沛 <luopei@11.com>

packages/vant/src/calendar/Calendar.tsx

@@ -116,6 +116,7 @@ export default defineComponent({
     'overRange',
     'update:show',
     'clickSubtitle',
+    'clickDisabledDate',
   ],
 
   setup(props, { emit, slots }) {
@@ -486,6 +487,7 @@ export default defineComponent({
             'allowSameDay',
           ])}
           onClick={onClickDay}
+          onClickDisabledDate={(item) => emit('clickDisabledDate', item)}
         />
       );
     };

packages/vant/src/calendar/CalendarDay.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     rowHeight: String,
   },
 
-  emits: ['click'],
+  emits: ['click', 'clickDisabledDate'],
 
   setup(props, { emit, slots }) {
     const style = computed(() => {
@@ -64,6 +64,8 @@ export default defineComponent({
     const onClick = () => {
       if (props.item.type !== 'disabled') {
         emit('click', props.item);
+      } else {
+        emit('clickDisabledDate', props.item);
       }
     };
 

packages/vant/src/calendar/CalendarMonth.tsx

@@ -62,7 +62,7 @@ export default defineComponent({
 
   props: calendarMonthProps,
 
-  emits: ['click'],
+  emits: ['click', 'clickDisabledDate'],
 
   setup(props, { emit, slots }) {
     const [visible, setVisible] = useToggle();
@@ -262,6 +262,7 @@ export default defineComponent({
         offset={offset.value}
         rowHeight={rowHeight.value}
         onClick={(item) => emit('click', item)}
+        onClickDisabledDate={(item) => emit('clickDisabledDate', item)}
       />
     );
 

packages/vant/src/calendar/README.md

@@ -328,6 +328,7 @@ Following props are supported when the type is multiple
 | month-show | Emitted when a month enters the visible area | _value: { date: Date, title: string }_ |
 | over-range | Emitted when exceeded max range | - |
 | click-subtitle | Emitted when clicking the subtitle | _event: MouseEvent_ |
+| click-disabled-date | Emitted when clicking disabled date | _value: Date \| Date[]_ |
 
 ### Slots
 

packages/vant/src/calendar/README.zh-CN.md

@@ -334,6 +334,7 @@ export default {
 | month-show | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ |
 | over-range | 范围选择超过最多可选天数时触发 | - |
 | click-subtitle | 点击日历副标题时触发 | _event: MouseEvent_ |
+| click-disabled-date | 点击禁用日期时触发 | _value: Date \| Date[]_ |
 
 ### Slots
 

packages/vant/src/calendar/test/index.spec.ts

@@ -187,6 +187,26 @@ test('should not trigger select event when click disabled day', async () => {
   expect(wrapper.emitted('select')).toBeFalsy();
 });
 
+test('should trigger click-disabled-date event when click disabled day', async () => {
+  const fn = vi.fn();
+  const wrapper = mount(Calendar, {
+    props: {
+      minDate,
+      maxDate,
+      poppable: false,
+      lazyRender: false,
+      onClickDisabledDate: fn,
+    },
+  });
+
+  await later();
+
+  const disabeldDate = wrapper.findAll('.van-calendar__day--disabled')[0];
+  expect(disabeldDate).toBeDefined();
+  await disabeldDate.trigger('click');
+  expect(fn).toHaveBeenCalled();
+});
+
 test('confirm event when type is single', async () => {
   const wrapper = mount(Calendar, {
     props: {