feat: Allow month change on calendar wheel scroll (#43)

Author: Jasenkoo

index.d.ts

@@ -139,6 +139,7 @@ interface Vue3DatePicker {
     showNowButton?: boolean;
     nowButtonLabel?: string;
     partialRange?: boolean;
+    monthChangeOnScroll?: boolean;
 }
 
 interface PublicMethods extends MethodOptions {

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -199,6 +199,7 @@
         showNowButton: { type: Boolean as PropType<boolean>, default: false },
         nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
         partialRange: { type: Boolean as PropType<boolean>, default: true },
+        monthChangeOnScroll: { type: Boolean as PropType<boolean>, default: true },
     });
     const slots = useSlots();
     const isOpen = ref(false);

src/Vue3DatePicker/components/Calendar.vue

@@ -24,7 +24,13 @@
                     <slot :name="slot" v-bind="args" />
                 </template>
             </component>
-            <div v-if="!specificMode" :class="calendarWrapClass" role="grid" aria-label="Calendar wrapper">
+            <div
+                v-if="!specificMode"
+                :class="calendarWrapClass"
+                role="grid"
+                aria-label="Calendar wrapper"
+                @wheel="$emit('handleScroll', $event)"
+            >
                 <div class="db__calendar_header" role="row">
                     <div class="dp__calendar_header_item" role="gridcell" v-if="weekNumbers">{{ weekNumName }}</div>
                     <div class="dp__calendar_header_item" role="gridcell" v-for="(dayVal, i) in weekDays" :key="i">
@@ -117,6 +123,7 @@
         'update:month',
         'update:year',
         'monthYearSelect',
+        'handleScroll',
     ]);
 
     const props = defineProps({

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -23,6 +23,7 @@
                 @month-year-select="monthYearSelect"
                 @select-date="selectDate($event)"
                 @set-hover-date="setHoverDate($event)"
+                @handle-scroll="handleScroll"
             >
                 <template v-for="(slot, i) in calendarSlots" #[slot]="args" :key="i">
                     <slot :name="slot" v-bind="{ ...args }" />
@@ -43,6 +44,7 @@
                 @update:year="updateMonthYear($event, false, true)"
                 @select-date="selectDate($event, true)"
                 @set-hover-date="setHoverDate($event)"
+                @handle-scroll="handleScroll($event, true)"
             >
                 <template v-for="(slot, i) in calendarSlots" #[slot]="args" :key="i">
                     <slot :name="slot" v-bind="{ ...args }" />
@@ -170,6 +172,7 @@
         allowedDates: { type: Array as PropType<string[] | Date[]>, default: () => [] },
         showNowButton: { type: Boolean as PropType<boolean>, default: false },
         nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
+        monthChangeOnScroll: { type: Boolean as PropType<boolean>, default: true },
     });
     const slots = useSlots();
     const calendarWrapperRef = ref(null);
@@ -209,6 +212,7 @@
         clearHoverDate,
         rangeActiveStartEnd,
         monthYearSelect,
+        handleScroll,
     } = useCalendar(props, emit);
 
     const calendarSlots = mapSlots(slots, 'calendar');

src/Vue3DatePicker/components/composition/calendar.ts

@@ -34,6 +34,7 @@ interface IUseCalendar {
     rangeActiveStartEnd: (day: UnwrapRef<ICalendarDay>, isStart?: boolean) => boolean;
     monthYearSelect: (isYear?: boolean) => void;
     clearHoverDate: () => void;
+    handleScroll: (event: WheelEvent, isNext?: boolean) => void;
     today: Ref<Date>;
     month: Ref<number>;
     year: Ref<number>;
@@ -455,6 +456,12 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
         }
     };
 
+    const handleScroll = (event: WheelEvent, isNext = false): void => {
+        const yearMonth: [number, number] = isNext ? [monthNext.value, yearNext.value] : [month.value, year.value];
+        const dates = event.deltaY < 0 ? getNextYearMonth(...yearMonth) : getPreviousMonthYear(...yearMonth);
+        updateMonthYear(dates.month, true, isNext);
+    };
+
     return {
         today,
         hours,
@@ -477,5 +484,6 @@ export const useCalendar = (props: UseCalendar, emit: VueEmit): IUseCalendar =>
         isAutoRangeStart,
         clearHoverDate,
         rangeActiveStartEnd,
+        handleScroll,
     };
 };

src/Vue3DatePicker/interfaces.ts

@@ -100,6 +100,7 @@ export type UseCalendar = {
     autoRange: number | string;
     disabledWeekDays: number[] | string[];
     allowedDates: Date[] | string[];
+    monthChangeOnScroll: boolean;
 } & { [key: string]: any };
 
 export interface UseMonthYearPick {