@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-beta.0

package/src/components/calendar/CCalendar.ts

@@ -3,7 +3,10 @@ import { defineComponent, h, PropType, ref, watch } from 'vue'
 import { CButton } from '../button'
 
 import {
+  convertToDateObject,
   createGroupsInArray,
+  getCalendarDate,
+  getDateBySelectionType,
   getMonthDetails,
   getMonthsNames,
   getYears,
@@ -11,11 +14,8 @@ import {
   isDateInRange,
   isDateSelected,
   isDisableDateInRange,
-  isLastDayOfMonth,
   isSameDateAs,
   isToday,
-  isStartDate,
-  isEndDate,
 } from './utils'
 
 const CCalendar = defineComponent({
@@ -24,9 +24,7 @@ const CCalendar = defineComponent({
     /**
      * Default date of the component
      */
-    calendarDate: {
-      type: [Date, String],
-    },
+    calendarDate: null as unknown as PropType<Date | string | null>,
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -66,9 +64,7 @@ const CCalendar = defineComponent({
     /**
      * Initial selected to date (range).
      */
-    endDate: {
-      type: [Date, String],
-    },
+    endDate: null as unknown as PropType<Date | string | null>,
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -93,15 +89,11 @@ const CCalendar = defineComponent({
     /**
      * Max selectable date.
      */
-    maxDate: {
-      type: [Date, String],
-    },
+    maxDate: null as unknown as PropType<Date | string | null>,
     /**
      * Min selectable date.
      */
-    minDate: {
-      type: [Date, String],
-    },
+    minDate: null as unknown as PropType<Date | string | null>,
     /**
      * Show arrows navigation.
      */
@@ -129,6 +121,16 @@ const CCalendar = defineComponent({
      * @since 4.9.0
      */
     selectAdjacementDays: Boolean,
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-beta.0
+     */
+    selectionType: {
+      type: String as PropType<'day' | 'week' | 'month' | 'year'>,
+      default: 'day',
+      validator: (value: string) => ['day', 'week', 'month', 'year'].includes(value),
+    },
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -138,12 +140,16 @@ const CCalendar = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-beta.0
+     */
+    showWeekNumber: Boolean,
     /**
      * Initial selected date.
      */
-    startDate: {
-      type: [Date, String],
-    },
+    startDate: null as unknown as PropType<Date | string | null>,
     /**
      * Set length or format of day name.
      *
@@ -165,6 +171,12 @@ const CCalendar = defineComponent({
         return false
       },
     },
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-beta.0
+     */
+    weekNumbersLabel: String,
   },
   emits: [
     /**
@@ -172,7 +184,7 @@ const CCalendar = defineComponent({
      *
      * @property {Date | null} date
      */
-    'calendar-cell-hover',
+    'date-hover',
     /**
      * Callback fired when the calendar date changed.
      *
@@ -193,20 +205,50 @@ const CCalendar = defineComponent({
     'end-date-change',
   ],
   setup(props, { slots, emit }) {
+    const calendarRef = ref<HTMLDivElement>()
     const calendarDate = ref(
       props.calendarDate
-        ? new Date(props.calendarDate)
+        ? convertToDateObject(props.calendarDate, props.selectionType)
         : props.startDate
-        ? new Date(props.startDate)
+        ? convertToDateObject(props.startDate, props.selectionType)
         : new Date(),
     )
-    const startDate = ref(props.startDate ? new Date(props.startDate) : null)
-    const endDate = ref(props.endDate ? new Date(props.endDate) : null)
+    const startDate = ref<Date | null>(
+      props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null,
+    )
+    const endDate = ref(
+      props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null,
+    )
     const hoverDate = ref<Date | null>(null)
-    const maxDate = ref(props.maxDate ? new Date(props.maxDate) : null)
-    const minDate = ref(props.minDate ? new Date(props.minDate) : null)
+    const maxDate = ref(
+      props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null,
+    )
+    const minDate = ref(
+      props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null,
+    )
     const selectEndDate = ref(props.selectEndDate)
-    const view = ref('days')
+    const view = ref<'days' | 'months' | 'years'>('days')
+
+    watch(
+      () => props.selectionType,
+      () => {
+        if (props.selectionType === 'day' || props.selectionType === 'week') {
+          view.value = 'days'
+          return
+        }
+
+        if (props.selectionType === 'month') {
+          view.value = 'months'
+          return
+        }
+
+        if (props.selectionType === 'year') {
+          view.value = 'years'
+          return
+        }
+      },
+      { immediate: true },
+    )
 
     watch(
       () => props.calendarDate,
@@ -220,7 +262,9 @@ const CCalendar = defineComponent({
     watch(
       () => props.startDate,
       () => {
-        const date = props.startDate ? new Date(props.startDate) : null
+        const date = props.startDate
+          ? convertToDateObject(props.startDate, props.selectionType)
+          : null
         if (!isSameDateAs(date, startDate.value)) {
           startDate.value = date
         }
@@ -230,7 +274,7 @@ const CCalendar = defineComponent({
     watch(
       () => props.endDate,
       () => {
-        const date = props.endDate ? new Date(props.endDate) : null
+        const date = props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null
         if (!isSameDateAs(date, endDate.value)) {
           endDate.value = date
         }
@@ -240,18 +284,14 @@ const CCalendar = defineComponent({
     watch(
       () => props.maxDate,
       () => {
-        if (props.maxDate) {
-          maxDate.value = new Date(props.maxDate)
-        }
+        maxDate.value = props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null
       },
     )
 
     watch(
       () => props.minDate,
       () => {
-        if (props.minDate) {
-          minDate.value = new Date(props.minDate)
-        }
+        minDate.value = props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null
       },
     )
 
@@ -263,11 +303,11 @@ const CCalendar = defineComponent({
     )
 
     watch(startDate, () => {
-      emit('start-date-change', startDate.value)
+      emit('start-date-change', getDateBySelectionType(startDate.value, props.selectionType))
     })
 
     watch(endDate, () => {
-      emit('end-date-change', endDate.value)
+      emit('end-date-change', getDateBySelectionType(endDate.value, props.selectionType))
     })
 
     const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
@@ -284,11 +324,31 @@ const CCalendar = defineComponent({
       emit('calendar-date-change', d)
     }
 
-    const handleCellOnClick = (date: Date) => {
+    const handleCalendarClick = (date: Date, index?: number) => {
       if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
         return
       }
 
+      const _date = new Date(date)
+
+      if (view.value === 'days') {
+        calendarDate.value = index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date
+      }
+
+      if (view.value === 'months' && props.selectionType !== 'month') {
+        calendarDate.value = index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date
+        view.value = 'days'
+        return
+      }
+
+      if (view.value === 'years' && props.selectionType !== 'year') {
+        calendarDate.value = index
+          ? new Date(_date.setFullYear(_date.getFullYear() - index))
+          : _date
+        view.value = 'months'
+        return
+      }
+
       if (props.range) {
         if (selectEndDate.value) {
           selectEndDate.value = false
@@ -329,97 +389,205 @@ const CCalendar = defineComponent({
       startDate.value = date
     }
 
-    const handleCellKeyDown = (event: KeyboardEvent, date: Date) => {
+    const handleCalendarKeyDown = (event: KeyboardEvent, date: Date, index?: number) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        handleCellOnClick && handleCellOnClick(date)
-        return
+        handleCalendarClick(date, index)
+      }
+
+      if (
+        event.key === 'ArrowRight' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown'
+      ) {
+        event.preventDefault()
+
+        if (
+          maxDate.value &&
+          date >= convertToDateObject(maxDate.value, props.selectionType) &&
+          (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+        ) {
+          return
+        }
+
+        if (
+          minDate.value &&
+          date <= convertToDateObject(minDate.value, props.selectionType) &&
+          (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+        ) {
+          return
+        }
+
+        let element = event.target as HTMLElement
+
+        if (props.selectionType === 'week' && element.tabIndex === -1) {
+          element = element.closest('tr[tabindex="0"]') as HTMLElement
+        }
+
+        const list: HTMLElement[] = calendarRef.value
+          ? Array.from(
+              calendarRef.value.querySelectorAll(
+                props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current',
+              ),
+            )
+          : []
+
+        const index = list.indexOf(element)
+        const first = index === 0
+        const last = index === list.length - 1
+
+        const toBoundary = {
+          start: index,
+          end: list.length - (index + 1),
+        }
+
+        const gap = {
+          ArrowRight: 1,
+          ArrowLeft: -1,
+          ArrowUp:
+            props.selectionType === 'week' && view.value === 'days'
+              ? -1
+              : view.value === 'days'
+              ? -7
+              : -3,
+          ArrowDown:
+            props.selectionType === 'week' && view.value === 'days'
+              ? 1
+              : view.value === 'days'
+              ? 7
+              : 3,
+        }
+
+        if (
+          (event.key === 'ArrowRight' && last) ||
+          (event.key === 'ArrowDown' && toBoundary['end'] < gap['ArrowDown']) ||
+          (event.key === 'ArrowLeft' && first) ||
+          (event.key === 'ArrowUp' && toBoundary['start'] < Math.abs(gap['ArrowUp']))
+        ) {
+          if (view.value === 'days') {
+            setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
+          }
+
+          if (view.value === 'months') {
+            setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
+          }
+
+          if (view.value === 'years') {
+            setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 10 : -10)
+          }
+
+          setTimeout(() => {
+            const _list: HTMLElement[] = element.parentNode?.parentNode ? Array.from(
+              element.parentNode.parentNode.querySelectorAll('td[tabindex="0"], tr[tabindex="0"]'),
+            ) : []
+
+            if (_list.length && event.key === 'ArrowRight') {
+              _list[0].focus()
+            }
+
+            if (_list.length && event.key === 'ArrowLeft') {
+              _list[_list.length - 1].focus()
+            }
+
+            if (_list.length && event.key === 'ArrowDown') {
+              _list[gap['ArrowDown'] - (list.length - index)].focus()
+            }
+
+            if (_list.length && event.key === 'ArrowUp') {
+              _list[_list.length - (Math.abs(gap['ArrowUp']) + 1 - (index + 1))].focus()
+            }
+          }, 1)
+
+          return
+        }
+
+        if (list[index + gap[event.key]].tabIndex === 0) {
+          list[index + gap[event.key]].focus()
+          return
+        }
+
+        for (
+          let i = index;
+          i < list.length;
+          event.key === 'ArrowRight' || event.key === 'ArrowDown' ? i++ : i--
+        ) {
+          if (list[i + gap[event.key]].tabIndex === 0) {
+            list[i + gap[event.key]].focus()
+            break
+          }
+        }
       }
     }
 
-    const handleCellMouseEnter = (date: Date) => {
+    const handleCalendarMouseEnter = (date: Date) => {
       if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
         return
       }
 
       hoverDate.value = date
-      emit('calendar-cell-hover', date)
+      emit('date-hover', getDateBySelectionType(date, props.selectionType))
     }
 
-    const handleCellMouseLeave = () => {
+    const handleCalendarMouseLeave = () => {
       hoverDate.value = null
-      emit('calendar-cell-hover', null)
-    }
-
-    const handleMonthKeyDown = (event: KeyboardEvent, month: number) => {
-      if (event.code === 'Space' || event.key === 'Enter') {
-        setCalendarPage(0, month)
-        view.value = 'days'
-      }
-    }
-
-    const handleYearKeyDown = (event: KeyboardEvent, date: Date) => {
-      if (event.code === 'Space' || event.key === 'Enter') {
-        calendarDate.value = date
-        view.value = 'months'
-      }
+      emit('date-hover', null)
     }
 
     const handleNavigationOnClick = (direction: string, double = false) => {
       if (direction === 'prev') {
         if (double) {
-          setCalendarPage(view.value === 'days' ? -1 : -10)
+          setCalendarPage(view.value === 'years' ? -10 : -1)
           return
         }
+
         if (view.value !== 'days') {
           setCalendarPage(-1)
           return
         }
+
         setCalendarPage(0, -1)
         return
       }
+
       if (direction === 'next') {
         if (double) {
-          setCalendarPage(view.value === 'days' ? 1 : 10)
+          setCalendarPage(view.value === 'years' ? 10 : 1)
           return
         }
+
         if (view.value !== 'days') {
           setCalendarPage(1)
           return
         }
+
         setCalendarPage(0, 1)
         return
       }
     }
 
-    const Calendar = (addMonths: number) => {
-      let date = calendarDate.value
-
-      if (addMonths !== 0) {
-        date = new Date(
-          calendarDate.value.getFullYear(),
-          calendarDate.value.getMonth() + addMonths,
-          1,
-        )
-      }
-
+    const Calendar = (_calendarDate: Date) => {
       const monthDetails = getMonthDetails(
-        date.getFullYear(),
-        date.getMonth(),
+        _calendarDate.getFullYear(),
+        _calendarDate.getMonth(),
         props.firstDayOfWeek,
       )
       const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4)
-      const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4)
-      const weekDays = monthDetails[0]
+      const listOfYears = createGroupsInArray(getYears(_calendarDate.getFullYear()), 4)
+      const weekDays = monthDetails[0].days
 
       return h('table', {}, [
         view.value === 'days' &&
           h(
             'thead',
             {},
-            h(
-              'tr',
-              {},
+            h('tr', {}, [
+              props.showWeekNumber &&
+                h(
+                  'th',
+                  { class: 'calendar-cell' },
+                  h('div', { class: 'calendar-header-cell-inner' }, props.weekNumbersLabel),
+                ),
               weekDays.map(({ date }: { date: Date }) => {
                 return h(
                   'th',
@@ -441,78 +609,122 @@ const CCalendar = defineComponent({
                   ),
                 )
               }),
-            ),
+            ]),
           ),
         h('tbody', {}, [
           view.value === 'days' &&
             monthDetails.map((week) => {
+              const date = convertToDateObject(
+                week.weekNumber === 0
+                  ? `${_calendarDate.getFullYear()}W53`
+                  : `${_calendarDate.getFullYear()}W${week.weekNumber}`,
+                props.selectionType,
+              )
+              const isDisabled = isDateDisabled(
+                date,
+                minDate.value,
+                maxDate.value,
+                props.disabledDates,
+              )
+              const current = week.days.some((day) => day.month === 'current')
               return h(
                 'tr',
-                {},
-                week.map(({ date, month }: { date: Date; month: string }) => {
-                  return month === 'current' || props.showAdjacementDays
-                    ? h(
-                        'td',
-                        {
-                          class: [
-                            'calendar-cell',
-                            {
-                              today: isToday(date),
-                              disabled: isDateDisabled(
-                                date,
-                                minDate.value,
-                                maxDate.value,
-                                props.disabledDates,
-                              ),
-                              [month]: true,
-                              clickable: month !== 'current' && props.selectAdjacementDays,
-                              last: isLastDayOfMonth(date),
-                              range:
-                                month === 'current' &&
-                                isDateInRange(date, startDate.value, endDate.value),
-                              'range-hover':
-                                month === 'current' &&
-                                (hoverDate.value && selectEndDate.value
-                                  ? isDateInRange(date, startDate.value, hoverDate.value)
-                                  : isDateInRange(date, hoverDate.value, endDate.value)),
-                              selected: isDateSelected(date, startDate.value, endDate.value),
-                              start: isStartDate(date, startDate.value, endDate.value),
-                              end: isEndDate(date, startDate.value, endDate.value),
-                            },
-                          ],
-                          tabindex:
-                            (month === 'current' || props.selectAdjacementDays) &&
-                            !isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)
-                              ? 0
-                              : -1,
-                          title: date.toLocaleDateString(props.locale),
-                          ...((month === 'current' || props.selectAdjacementDays) && {
-                            onBlur: () => handleCellMouseLeave(),
-                            onClick: () => handleCellOnClick(date),
-                            onFocus: () => handleCellMouseEnter(date),
-                            onKeydown: (event: KeyboardEvent) => handleCellKeyDown(event, date),
-                            onmouseenter: () => handleCellMouseEnter(date),
-                            onmouseleave: () => handleCellMouseLeave(),
-                          }),
-                          ...(month !== 'current' &&
-                            !props.selectAdjacementDays && {
-                              onMouseEnter: () => handleCellMouseLeave(),
-                            }),
-                        },
-                        h(
-                          'div',
+                {
+                  class: [
+                    'calendar-row',
+                    {
+                      disabled: isDisabled,
+                      range:
+                        props.selectionType === 'week' &&
+                        isDateInRange(date, startDate.value, endDate.value),
+                      'range-hover':
+                        props.selectionType === 'week' && hoverDate.value && selectEndDate.value
+                          ? isDateInRange(date, startDate.value, hoverDate.value)
+                          : isDateInRange(date, hoverDate.value, endDate.value),
+                      selected: isDateSelected(date, startDate.value, endDate.value),
+                    },
+                  ],
+                  tabindex: props.selectionType === 'week' && current && !isDisabled ? 0 : -1,
+                  ...(props.selectionType === 'week' &&
+                    !isDisabled && {
+                      onBlur: () => handleCalendarMouseLeave(),
+                      onClick: () => handleCalendarClick(date),
+                      onFocus: () => handleCalendarMouseEnter(date),
+                      onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
+                      onMouseEnter: () => handleCalendarMouseEnter(date),
+                      onMouseLeave: () => handleCalendarMouseLeave(),
+                    }),
+                },
+                [
+                  props.showWeekNumber &&
+                    h(
+                      'th',
+                      { class: 'calendar-cell-week-number' },
+                      week.weekNumber === 0 ? 53 : week.weekNumber,
+                    ),
+                  week.days.map(({ date, month }: { date: Date; month: string }) => {
+                    const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)
+                    return month === 'current' || props.showAdjacementDays
+                      ? h(
+                          'td',
                           {
-                            class: 'calendar-cell-inner',
-                          },
-                          typeof props.dayFormat === 'function'
-                            ? props.dayFormat(date)
-                            : date.toLocaleDateString(props.locale, {
-                                day: <'numeric' | '2-digit'>props.dayFormat,
+                            class: [
+                              'calendar-cell',
+                              {
+                                ...(props.selectionType === 'day' && {
+                                  clickable: month !== 'current' && props.selectAdjacementDays,
+                                  disabled: isDisabled,
+                                  'range-hover':
+                                    month === 'current' &&
+                                    (hoverDate.value && selectEndDate.value
+                                      ? isDateInRange(date, startDate.value, hoverDate.value)
+                                      : isDateInRange(date, hoverDate.value, endDate.value)),
+                                  range:
+                                    month === 'current' &&
+                                    isDateInRange(date, startDate.value, endDate.value),
+                                  selected: isDateSelected(date, startDate.value, endDate.value),
+                                }),
+                                [month]: true,
+                                today: month === 'current' && isToday(date),
+                              },
+                            ],
+                            tabindex:
+                              props.selectionType === 'day' &&
+                              (month === 'current' || props.selectAdjacementDays) &&
+                              !isDisabled
+                                ? 0
+                                : -1,
+                            title: date.toLocaleDateString(props.locale),
+                            ...(props.selectionType === 'day' &&
+                              (month === 'current' || props.selectAdjacementDays) && {
+                                onBlur: () => handleCalendarMouseLeave(),
+                                onClick: () => handleCalendarClick(date),
+                                onFocus: () => handleCalendarMouseEnter(date),
+                                onKeydown: (event: KeyboardEvent) =>
+                                  handleCalendarKeyDown(event, date),
+                                onMouseEnter: () => handleCalendarMouseEnter(date),
+                                onMouseLeave: () => handleCalendarMouseLeave(),
                               }),
-                        ),
-                      )
-                    : h('td')
-                }),
+                            ...(month !== 'current' &&
+                              !props.selectAdjacementDays && {
+                                onMouseEnter: () => handleCalendarMouseLeave(),
+                              }),
+                          },
+                          h(
+                            'div',
+                            {
+                              class: 'calendar-cell-inner',
+                            },
+                            typeof props.dayFormat === 'function'
+                              ? props.dayFormat(date)
+                              : date.toLocaleDateString(props.locale, {
+                                  day: <'numeric' | '2-digit'>props.dayFormat,
+                                }),
+                          ),
+                        )
+                      : h('td')
+                  }),
+                ],
               )
             }),
           view.value === 'months' &&
@@ -521,17 +733,39 @@ const CCalendar = defineComponent({
                 'tr',
                 {},
                 row.map((month, idx) => {
+                  const monthNumber = index * 3 + idx
+                  const date = new Date(Date.UTC(_calendarDate.getFullYear(), monthNumber, 1))
+                  const isDisabled = isDateDisabled(
+                    date,
+                    minDate.value,
+                    maxDate.value,
+                    props.disabledDates,
+                  )
                   return h(
                     'td',
                     {
-                      class: 'calendar-cell month',
-                      onClick: () => {
-                        setCalendarPage(0, 0, index * 3 + idx - addMonths)
-                        view.value = 'days'
-                      },
-                      onKeydown: (event: KeyboardEvent) =>
-                        handleMonthKeyDown(event, index * 3 + idx - addMonths),
-                      tabindex: 0,
+                      class: [
+                        'calendar-cell',
+                        {
+                          disabled: isDisabled,
+                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          'range-hover':
+                            props.selectionType === 'month' &&
+                            (hoverDate && selectEndDate
+                              ? isDateInRange(date, startDate.value, hoverDate.value)
+                              : isDateInRange(date, hoverDate.value, endDate.value)),
+                          range: isDateInRange(date, startDate.value, endDate.value),
+                        },
+                      ],
+                      tabindex: !isDisabled ? 0 : -1,
+                      ...(!isDisabled && {
+                        onBlur: () => handleCalendarMouseLeave(),
+                        onClick: () => handleCalendarClick(date),
+                        onFocus: () => handleCalendarMouseEnter(date),
+                        onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
+                        onMouseEnter: () => handleCalendarMouseEnter(date),
+                        onMouseLeave: () => handleCalendarMouseLeave(),
+                      }),
                     },
                     h('div', { class: 'calendar-cell-inner' }, month),
                   )
@@ -544,24 +778,38 @@ const CCalendar = defineComponent({
                 'tr',
                 {},
                 row.map((year) => {
+                  const date = new Date(Date.UTC(year, 0, 1))
+                  const isDisabled = isDateDisabled(
+                    date,
+                    minDate.value,
+                    maxDate.value,
+                    props.disabledDates,
+                  )
                   return h(
                     'td',
                     {
-                      class: 'calendar-cell year',
-                      onClick: () => {
-                        calendarDate.value = new Date(
-                          year,
-                          date.getMonth() - addMonths,
-                          date.getDate(),
-                        )
-                        view.value = 'months'
-                      },
-                      onKeydown: (event: KeyboardEvent) =>
-                        handleYearKeyDown(
-                          event,
-                          new Date(year, date.getMonth() - addMonths, date.getDate()),
-                        ),
-                      tabindex: 0,
+                      class: [
+                        'calendar-cell year',
+                        {
+                          disabled: isDisabled,
+                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          'range-hover':
+                            props.selectionType === 'year' &&
+                            (hoverDate && selectEndDate
+                              ? isDateInRange(date, startDate.value, hoverDate.value)
+                              : isDateInRange(date, hoverDate.value, endDate.value)),
+                          range: isDateInRange(date, startDate.value, endDate.value),
+                        },
+                      ],
+                      tabindex: !isDisabled ? 0 : -1,
+                      ...(!isDisabled && {
+                        onBlur: () => handleCalendarMouseLeave(),
+                        onClick: () => handleCalendarClick(date),
+                        onFocus: () => handleCalendarMouseEnter(date),
+                        onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
+                        onMouseEnter: () => handleCalendarMouseEnter(date),
+                        onMouseLeave: () => handleCalendarMouseLeave(),
+                      }),
                     },
                     h('div', { class: 'calendar-cell-inner' }, year),
                   )
@@ -572,17 +820,7 @@ const CCalendar = defineComponent({
       ])
     }
 
-    const Navigation = (addMonths: number) => {
-      let date = calendarDate.value
-
-      if (addMonths !== 0) {
-        date = new Date(
-          calendarDate.value.getFullYear(),
-          calendarDate.value.getMonth() + addMonths,
-          1,
-        )
-      }
-
+    const Navigation = (_calendarDate: Date) => {
       return h('div', { class: 'calendar-nav' }, [
         props.navigation &&
           h(
@@ -645,7 +883,7 @@ const CCalendar = defineComponent({
                     if (props.navigation) view.value = 'months'
                   },
                 },
-                () => date.toLocaleDateString(props.locale, { month: 'long' }),
+                () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' }),
               ),
             h(
               CButton,
@@ -657,7 +895,7 @@ const CCalendar = defineComponent({
                 },
                 ...(props.navYearFirst && { style: { order: '-1' } }),
               },
-              () => date.toLocaleDateString(props.locale, { year: 'numeric' }),
+              () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' }),
             ),
           ],
         ),
@@ -709,11 +947,28 @@ const CCalendar = defineComponent({
     }
 
     return () =>
-      h('div', { class: 'calendars' }, [
-        Array.from({ length: props.calendars }, (_, index) =>
-          h('div', { class: ['calendar', view.value] }, [Navigation(index), Calendar(index)]),
-        ),
-      ])
+      h(
+        'div',
+        {
+          class: [
+            'calendars',
+            {
+              [`select-${props.selectionType}`]: props.selectionType && view.value === 'days',
+              'show-week-numbers': props.showWeekNumber,
+            },
+          ],
+          ref: calendarRef,
+        },
+        [
+          Array.from({ length: props.calendars }, (_, index) => {
+            const _calendarDate = getCalendarDate(calendarDate.value, index, view.value)
+            return h('div', { class: ['calendar', view.value] }, [
+              Navigation(_calendarDate),
+              Calendar(_calendarDate),
+            ])
+          }),
+        ],
+      )
   },
 })