@coreui/react-pro 4.13.1 → 5.0.0-alpha.1

package/src/components/calendar/CCalendar.tsx

@@ -5,7 +5,10 @@ import classNames from 'classnames'
 import { CButton } from '../button/CButton'
 
 import {
+  convertToDateObject,
   createGroupsInArray,
+  getCalendarDate,
+  getDateBySelectionType,
   getMonthDetails,
   getMonthsNames,
   getYears,
@@ -13,20 +16,17 @@ import {
   isDateInRange,
   isDateSelected,
   isDisableDateInRange,
-  isLastDayOfMonth,
   isSameDateAs,
   isToday,
-  isStartDate,
-  isEndDate,
 } from './utils'
 
-import { useStateWithCallback } from '../../hooks'
+import { useForkedRef, useStateWithCallback } from '../../hooks'
 
 export interface CCalendarProps {
   /**
    * Default date of the component
    */
-  calendarDate?: Date | string
+  calendarDate?: Date | string | null
   /**
    * The number of calendars that render on desktop devices.
    */
@@ -103,6 +103,10 @@ export interface CCalendarProps {
    * @since 4.3.0
    */
   navYearFirst?: boolean
+  /**
+   * Allow range selection.
+   */
+  range?: boolean
   /**
    * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
    *
@@ -116,13 +120,21 @@ export interface CCalendarProps {
    */
   showAdjacementDays?: boolean
   /**
-   * Allow range selection.
+   * Set whether to display week numbers in the calendar.
+   *
+   * @since 5.0.0-alpha.1
    */
-  range?: boolean
+  showWeekNumber?: boolean
   /**
    * Toggle select mode between start and end date.
    */
   selectEndDate?: boolean
+  /**
+   * Specify the type of date selection as day, week, month, or year.
+   *
+   * @since 5.0.0-alpha.1
+   */
+  selectionType?: 'day' | 'week' | 'month' | 'year'
   /**
    * Initial selected date.
    */
@@ -133,22 +145,28 @@ export interface CCalendarProps {
    * @default 2
    */
   weekdayFormat?: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
+  /**
+   * Label displayed over week numbers in the calendar.
+   *
+   * @since 5.0.0-alpha.1
+   */
+  weekNumbersLabel?: string
   /**
    * Callback fired when the calendar date changed.
    */
-  onCalendarDateChange?: (date: Date) => void
+  onCalendarDateChange?: (date: Date | string) => void
   /**
    * Callback fired when the user hovers over the calendar cell.
    */
-  onDayHover?: (date: Date | null) => void
+  onDateHover?: (date: Date | string | null) => void
   /**
    * Callback fired when the start date changed.
    */
-  onStartDateChange?: (date: Date | null, formatedDate?: string | undefined) => void
+  onStartDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void
   /**
    * Callback fired when the end date changed.
    */
-  onEndDateChange?: (date: Date | null, formatedDate?: string | undefined) => void
+  onEndDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void
   /**
    * Callback fired when the selection type changed.
    */
@@ -160,7 +178,6 @@ export interface CCalendarProps {
 }
 
 const Calendar = (props: {
-  addMonths: number
   calendarDate: Date
   dayFormat?: 'numeric' | '2-digit' | ((date: Date) => string | number)
   disabledDates?: Date[] | Date[][] | (Date | Date[])[]
@@ -170,23 +187,22 @@ const Calendar = (props: {
   locale: string
   maxDate: Date | null
   minDate: Date | null
-  onDayClick: (date: Date) => void
-  onDayKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
-  onDayMouseEnter: (date: Date) => void
-  onDayMouseLeave: () => void
-  onMonthClick: (month: number) => void
-  onMonthKeyDown: (event: KeyboardEvent<HTMLDivElement>, month: number) => void
-  onYearClick: (date: Date) => void
-  onYearKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
+  onCalendarClick: (date: Date) => void
+  onCalendarKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
+  onCalendarMouseEnter: (date: Date) => void
+  onCalendarMouseLeave: () => void
+  order: number
   selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
+  selectionType: 'day' | 'week' | 'month' | 'year'
   showAdjacementDays: boolean
+  showWeekNumber: boolean
   startDate: Date | null
-  view: string
+  view: 'days' | 'months' | 'years'
   weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
+  weekNumbersLabel: string | undefined
 }) => {
   const {
-    addMonths,
     calendarDate,
     dayFormat,
     disabledDates,
@@ -196,54 +212,52 @@ const Calendar = (props: {
     locale,
     maxDate,
     minDate,
-    onDayClick,
-    onDayKeyDown,
-    onDayMouseEnter,
-    onDayMouseLeave,
-    onMonthClick,
-    onMonthKeyDown,
-    onYearClick,
-    onYearKeyDown,
+    onCalendarClick,
+    onCalendarKeyDown,
+    onCalendarMouseEnter,
+    onCalendarMouseLeave,
     selectAdjacementDays,
     selectEndDate,
+    selectionType,
+    showWeekNumber,
     showAdjacementDays,
     startDate,
     view,
     weekdayFormat,
+    weekNumbersLabel,
   } = props
-  const [date, setDate] = useState<Date>(calendarDate)
   const [listOfMonths, setListOfMonths] = useState<string[][]>([])
 
-  useEffect(() => {
-    if (addMonths !== 0) {
-      setDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + addMonths, 1))
-      return
-    }
-
-    setDate(calendarDate)
-  }, [calendarDate])
-
   useEffect(() => {
     setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4))
   }, [])
 
-  const monthDetails = getMonthDetails(date.getFullYear(), date.getMonth(), firstDayOfWeek)
-  const listOfYears = createGroupsInArray(getYears(date.getFullYear()), 4)
-  const weekDays = monthDetails[0]
+  const monthDetails = getMonthDetails(
+    calendarDate.getFullYear(),
+    calendarDate.getMonth(),
+    firstDayOfWeek,
+  )
+  const listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4)
+  const weekDays = monthDetails[0].days
 
   return (
     <table>
       {view === 'days' && (
         <thead>
           <tr>
+            {showWeekNumber && (
+              <th className="calendar-cell">
+                <div className="calendar-header-cell-inner">{weekNumbersLabel}</div>
+              </th>
+            )}
             {weekDays.map(({ date }: { date: Date }, idx: number) => (
               <th key={idx} className="calendar-cell">
                 <div className="calendar-header-cell-inner">
                   {typeof weekdayFormat === 'function'
                     ? weekdayFormat(date)
-                    : (typeof weekdayFormat === 'string'
+                    : typeof weekdayFormat === 'string'
                     ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat))}
+                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat)}
                 </div>
               </th>
             ))}
@@ -253,46 +267,81 @@ const Calendar = (props: {
       <tbody>
         {view === 'days' &&
           monthDetails.map((week, index) => {
+            const date = convertToDateObject(
+              week.weekNumber === 0
+                ? `${calendarDate.getFullYear()}W53`
+                : `${calendarDate.getFullYear()}W${week.weekNumber}`,
+              selectionType,
+            )
+            const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
             return (
-              <tr key={index}>
-                {week.map(({ date, month }: { date: Date; month: string }, idx: number) =>
-                  month === 'current' || showAdjacementDays ? (
+              <tr
+                className={classNames('calendar-row', {
+                  disabled: isDisabled,
+                  range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
+                  'range-hover':
+                    selectionType === 'week' && hoverDate && selectEndDate
+                      ? isDateInRange(date, startDate, hoverDate)
+                      : isDateInRange(date, hoverDate, endDate),
+                  selected: isDateSelected(date, startDate, endDate),
+                })}
+                key={index}
+                tabIndex={selectionType === 'week' && !isDisabled ? 0 : -1}
+                {...(selectionType === 'week' &&
+                  !isDisabled && {
+                    onBlur: () => onCalendarMouseLeave(),
+                    onClick: () => onCalendarClick(date),
+                    onFocus: () => onCalendarMouseEnter(date),
+                    onKeyDown: (event) => onCalendarKeyDown(event, date),
+                    onMouseEnter: () => onCalendarMouseEnter(date),
+                    onMouseLeave: () => onCalendarMouseLeave(),
+                  })}
+              >
+                {showWeekNumber && (
+                  <th className="calendar-cell-week-number">
+                    {week.weekNumber === 0 ? 53 : week.weekNumber}
+                  </th>
+                )}
+                {week.days.map(({ date, month }: { date: Date; month: string }, idx: number) => {
+                  const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
+                  return month === 'current' || showAdjacementDays ? (
                     <td
                       className={classNames('calendar-cell', {
-                        today: month === 'current' && isToday(date),
-                        disabled: isDateDisabled(date, minDate, maxDate, disabledDates),
+                        ...(selectionType === 'day' && {
+                          clickable: month !== 'current' && selectAdjacementDays,
+                          disabled: isDisabled,
+                          'range-hover':
+                            month === 'current' &&
+                            (hoverDate && selectEndDate
+                              ? isDateInRange(date, startDate, hoverDate)
+                              : isDateInRange(date, hoverDate, endDate)),
+                          range: month === 'current' && isDateInRange(date, startDate, endDate),
+                          selected: isDateSelected(date, startDate, endDate),
+                        }),
                         [month]: true,
-                        clickable: month !== 'current' && selectAdjacementDays,
-                        last: isLastDayOfMonth(date),
-                        'range-hover':
-                          month === 'current' &&
-                          (hoverDate && selectEndDate
-                            ? isDateInRange(date, startDate, hoverDate)
-                            : isDateInRange(date, hoverDate, endDate)),
-                        range: month === 'current' && isDateInRange(date, startDate, endDate),
-                        selected: isDateSelected(date, startDate, endDate),
-                        start: isStartDate(date, startDate, endDate),
-                        end: isEndDate(date, startDate, endDate),
+                        today: month === 'current' && isToday(date),
                       })}
                       key={idx}
                       tabIndex={
+                        selectionType === 'day' &&
                         (month === 'current' || selectAdjacementDays) &&
-                        !isDateDisabled(date, minDate, maxDate, disabledDates)
+                        !isDisabled
                           ? 0
                           : -1
                       }
                       title={date.toLocaleDateString(locale)}
-                      {...((month === 'current' || selectAdjacementDays) && {
-                        onBlur: () => onDayMouseLeave(),
-                        onClick: () => onDayClick(date),
-                        onFocus: () => onDayMouseEnter(date),
-                        onKeyDown: (event) => onDayKeyDown(event, date),
-                        onMouseEnter: () => onDayMouseEnter(date),
-                        onMouseLeave: () => onDayMouseLeave(),
-                      })}
+                      {...(selectionType === 'day' &&
+                        (month === 'current' || selectAdjacementDays) && {
+                          onBlur: () => onCalendarMouseLeave(),
+                          onClick: () => onCalendarClick(date),
+                          onFocus: () => onCalendarMouseEnter(date),
+                          onKeyDown: (event) => onCalendarKeyDown(event, date),
+                          onMouseEnter: () => onCalendarMouseEnter(date),
+                          onMouseLeave: () => onCalendarMouseLeave(),
+                        })}
                       {...(month !== 'current' &&
                         !selectAdjacementDays && {
-                          onMouseEnter: () => onDayMouseLeave(),
+                          onMouseEnter: () => onCalendarMouseLeave(),
                         })}
                     >
                       <div className="calendar-cell-inner">
@@ -303,8 +352,8 @@ const Calendar = (props: {
                     </td>
                   ) : (
                     <td key={idx}></td>
-                  ),
-                )}
+                  )
+                })}
               </tr>
             )
           })}
@@ -313,13 +362,31 @@ const Calendar = (props: {
             return (
               <tr key={index}>
                 {row.map((month, idx) => {
+                  const monthNumber = index * 3 + idx
+                  const date = new Date(Date.UTC(calendarDate.getFullYear(), monthNumber, 1))
+                  const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
                   return (
                     <td
-                      className="calendar-cell month"
+                      className={classNames('calendar-cell', {
+                        disabled: isDisabled,
+                        selected: isDateSelected(date, startDate, endDate),
+                        'range-hover':
+                          selectionType === 'month' &&
+                          (hoverDate && selectEndDate
+                            ? isDateInRange(date, startDate, hoverDate)
+                            : isDateInRange(date, hoverDate, endDate)),
+                        range: isDateInRange(date, startDate, endDate),
+                      })}
                       key={idx}
-                      onClick={() => onMonthClick(index * 3 + idx - addMonths)}
-                      onKeyDown={(event) => onMonthKeyDown(event, index * 3 + idx - addMonths)}
-                      tabIndex={0}
+                      tabIndex={!isDisabled ? 0 : -1}
+                      {...(!isDisabled && {
+                        onBlur: () => onCalendarMouseLeave(),
+                        onClick: () => onCalendarClick(date),
+                        onFocus: () => onCalendarMouseEnter(date),
+                        onKeyDown: (event) => onCalendarKeyDown(event, date),
+                        onMouseEnter: () => onCalendarMouseEnter(date),
+                        onMouseLeave: () => onCalendarMouseLeave(),
+                      })}
                     >
                       <div className="calendar-cell-inner">{month}</div>
                     </td>
@@ -333,20 +400,30 @@ const Calendar = (props: {
             return (
               <tr key={index}>
                 {row.map((year, idx) => {
+                  const date = new Date(Date.UTC(year, 0, 1))
+                  const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
                   return (
                     <td
-                      className="calendar-cell year"
+                      className={classNames('calendar-cell year', {
+                        disabled: isDisabled,
+                        selected: isDateSelected(date, startDate, endDate),
+                        'range-hover':
+                          selectionType === 'year' &&
+                          (hoverDate && selectEndDate
+                            ? isDateInRange(date, startDate, hoverDate)
+                            : isDateInRange(date, hoverDate, endDate)),
+                        range: isDateInRange(date, startDate, endDate),
+                      })}
                       key={idx}
-                      onClick={() =>
-                        onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()))
-                      }
-                      onKeyDown={(event) =>
-                        onYearKeyDown(
-                          event,
-                          new Date(year, date.getMonth() - addMonths, date.getDate()),
-                        )
-                      }
-                      tabIndex={0}
+                      tabIndex={!isDisabled ? 0 : -1}
+                      {...(!isDisabled && {
+                        onBlur: () => onCalendarMouseLeave(),
+                        onClick: () => onCalendarClick(date),
+                        onFocus: () => onCalendarMouseEnter(date),
+                        onKeyDown: (event) => onCalendarKeyDown(event, date),
+                        onMouseEnter: () => onCalendarMouseEnter(date),
+                        onMouseLeave: () => onCalendarMouseLeave(),
+                      })}
                     >
                       <div className="calendar-cell-inner">
                         {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
@@ -363,7 +440,6 @@ const Calendar = (props: {
 }
 
 const Navigation = (props: {
-  addMonths: number
   calendarDate: Date
   locale: string
   navigation: boolean
@@ -375,10 +451,9 @@ const Navigation = (props: {
   onMonthClick: () => void
   onNavigationClick: (direction: string, double?: boolean) => void
   onYearClick: () => void
-  view: string
+  view: 'days' | 'months' | 'years'
 }) => {
   const {
-    addMonths,
     calendarDate,
     locale,
     navigation,
@@ -393,16 +468,6 @@ const Navigation = (props: {
     view,
   } = props
 
-  const [date, setDate] = useState<Date | null>()
-  useEffect(() => {
-    if (addMonths !== 0) {
-      setDate(new Date(calendarDate.getFullYear(), calendarDate.getMonth() + addMonths, 1))
-      return
-    }
-
-    setDate(calendarDate)
-  }, [calendarDate])
-
   return (
     <div className="calendar-nav">
       {navigation && (
@@ -425,7 +490,7 @@ const Navigation = (props: {
       >
         {view === 'days' && (
           <CButton color="transparent" size="sm" onClick={() => navigation && onMonthClick()}>
-            {date && date.toLocaleDateString(locale, { month: 'long' })}
+            {calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' })}
           </CButton>
         )}
         <CButton
@@ -434,7 +499,7 @@ const Navigation = (props: {
           onClick={() => navigation && onYearClick()}
           {...(navYearFirst && { style: { order: '-1' } })}
         >
-          {date && date.toLocaleDateString(locale, { year: 'numeric' })}
+          {calendarDate && calendarDate.toLocaleDateString(locale, { year: 'numeric' })}
         </CButton>
       </div>
       {navigation && (
@@ -478,10 +543,13 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       range,
       selectAdjacementDays = false,
       selectEndDate,
+      selectionType = 'day',
       showAdjacementDays = true,
+      showWeekNumber = false,
       weekdayFormat = 2,
-      onDayHover,
+      weekNumbersLabel,
       onCalendarDateChange,
+      onDateHover,
       onEndDateChange,
       onStartDateChange,
       onSelectEndChange,
@@ -489,9 +557,28 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     },
     ref,
   ) => {
+    const calendarRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, calendarRef)
     const isInitialMount = useRef(true)
     const [_calendarDate, setCalendarDate] = useState<Date | null>(null)
 
+    useEffect(() => {
+      if (selectionType === 'day' || selectionType === 'week') {
+        setView('days')
+        return
+      }
+
+      if (selectionType === 'month') {
+        setView('months')
+        return
+      }
+
+      if (selectionType === 'year') {
+        setView('years')
+        return
+      }
+    }, [selectionType])
+
     useEffect(() => {
       if (calendarDate === null) {
         setCalendarDate(new Date())
@@ -499,30 +586,31 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
 
       if (calendarDate) {
-        const date = new Date(calendarDate)
+        const date = convertToDateObject(calendarDate, selectionType)
         !isSameDateAs(_calendarDate, date) && setCalendarDate(date)
       }
     }, [calendarDate])
 
     const [_startDate, setStartDate] = useStateWithCallback<Date | null>(
-      startDate ? new Date(startDate) : null,
-      onStartDateChange,
+      startDate ? convertToDateObject(startDate, selectionType) : null,
+      () =>
+        onStartDateChange && onStartDateChange(getDateBySelectionType(_startDate, selectionType)),
       !isInitialMount.current,
     )
     useEffect(() => {
-      const date = startDate ? new Date(startDate) : null
+      const date = startDate ? convertToDateObject(startDate, selectionType) : null
       if (!isSameDateAs(date, _startDate)) {
         setStartDate(date)
       }
     }, [startDate])
 
     const [_endDate, setEndDate] = useStateWithCallback<Date | null>(
-      endDate ? new Date(endDate) : null,
-      onEndDateChange,
+      endDate ? convertToDateObject(endDate, selectionType) : null,
+      () => onEndDateChange && onEndDateChange(getDateBySelectionType(_endDate, selectionType)),
       !isInitialMount.current,
     )
     useEffect(() => {
-      const date = endDate ? new Date(endDate) : null
+      const date = endDate ? convertToDateObject(endDate, selectionType) : null
       if (!isSameDateAs(date, _endDate)) {
         setEndDate(date)
       }
@@ -530,14 +618,18 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
     const [_hoverDate, setHoverDate] = useState<Date | null>(null)
 
-    const [_maxDate, setMaxDate] = useState<Date | null>(maxDate ? new Date(maxDate) : null)
+    const [_maxDate, setMaxDate] = useState<Date | null>(
+      maxDate ? convertToDateObject(maxDate, selectionType) : null,
+    )
     useEffect(() => {
-      maxDate && setMaxDate(new Date(maxDate))
+      maxDate && setMaxDate(convertToDateObject(maxDate, selectionType))
     }, [maxDate])
 
-    const [_minDate, setMinDate] = useState<Date | null>(minDate ? new Date(minDate) : null)
+    const [_minDate, setMinDate] = useState<Date | null>(
+      minDate ? convertToDateObject(minDate, selectionType) : null,
+    )
     useEffect(() => {
-      minDate && setMinDate(new Date(minDate))
+      minDate && setMinDate(convertToDateObject(minDate, selectionType))
     }, [minDate])
 
     const [_selectEndDate, setSelectEndDate] = useStateWithCallback(
@@ -555,7 +647,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         onSelectEndChange(_selectEndDate)
     }, [_selectEndDate])
 
-    const [view, setView] = useStateWithCallback('days', onViewChanged)
+    const [view, setView] = useStateWithCallback<'days' | 'months' | 'years'>('days', onViewChanged)
 
     useEffect(() => {
       isInitialMount.current = false
@@ -578,13 +670,28 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       onCalendarDateChange && onCalendarDateChange(d)
     }
 
-    const handleDayClick = (date: Date, index?: number) => {
+    const handleCalendarClick = (date: Date, index?: number) => {
       if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
 
       const _date = new Date(date)
-      setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date)
+
+      if (view === 'days') {
+        setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date)
+      }
+
+      if (view === 'months' && selectionType !== 'month') {
+        setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date)
+        setView('days')
+        return
+      }
+
+      if (view === 'years' && selectionType !== 'year') {
+        setCalendarDate(index ? new Date(_date.setFullYear(_date.getFullYear() - index)) : _date)
+        setView('months')
+        return
+      }
 
       if (range) {
         if (_selectEndDate) {
@@ -626,40 +733,132 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       setStartDate(date)
     }
 
-    const handleDayKeyDown = (
+    const handleCalendarKeyDown = (
       event: React.KeyboardEvent<HTMLDivElement>,
       date: Date,
       index?: number,
     ) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        handleDayClick(date, index)
+        handleCalendarClick(date, index)
+      }
+
+      if (
+        event.key === 'ArrowRight' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown'
+      ) {
+        event.preventDefault()
+
+        if (
+          maxDate &&
+          date >= convertToDateObject(maxDate, selectionType) &&
+          (event.key === 'ArrowRight' || event.key === 'ArrowDown')
+        ) {
+          return
+        }
+
+        if (
+          minDate &&
+          date <= convertToDateObject(minDate, selectionType) &&
+          (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+        ) {
+          return
+        }
+
+        let element = event.target as HTMLElement
+
+        if (selectionType === 'week' && element.tabIndex === -1) {
+          element = element.closest('tr[tabindex="0"]') as HTMLElement
+        }
+
+        const list: HTMLElement[] = [].concat(
+          ...Element.prototype.querySelectorAll.call(
+            calendarRef.current,
+            'td[tabindex="0"], tr[tabindex="0"]',
+          ),
+        )
+
+        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: selectionType === 'week' && view === 'days' ? -1 : view === 'days' ? -7 : -3,
+          ArrowDown: selectionType === 'week' && view === 'days' ? 1 : view === '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 === 'days') {
+            setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
+          }
+
+          if (view === 'months') {
+            setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1)
+          }
+
+          if (view === 'years') {
+            setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 10 : -10)
+          }
+
+          setTimeout(() => {
+            const _list: HTMLElement[] = [].concat(
+              ...Element.prototype.querySelectorAll.call(
+                element.parentNode?.parentNode,
+                '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
+        }
+
+        list[index + gap[event.key]].focus()
       }
     }
 
-    const handleDayMouseEnter = (date: Date) => {
+    const handleCalendarMouseEnter = (date: Date) => {
       if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
 
       setHoverDate(date)
-      onDayHover && onDayHover(date)
-    }
-
-    const handleDayMouseLeave = () => {
-      setHoverDate(null)
-      onDayHover && onDayHover(null)
-    }
 
-    const handleMonthClick = (month: number) => {
-      setCalendarPage(0, 0, month)
-      setView('days')
+      date && onDateHover && onDateHover(getDateBySelectionType(date, selectionType))
     }
 
-    const handleMonthKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, month: number) => {
-      if (event.code === 'Space' || event.key === 'Enter') {
-        handleMonthClick(month)
-      }
+    const handleCalendarMouseLeave = () => {
+      setHoverDate(null)
+      onDateHover && onDateHover(null)
     }
 
     const handleNavigationOnClick = (direction: string, double = false) => {
@@ -677,6 +876,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         setCalendarPage(0, -1)
         return
       }
+
       if (direction === 'next') {
         if (double) {
           setCalendarPage(view === 'years' ? 10 : 1)
@@ -693,65 +893,65 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }
 
-    const handleYearClick = (date: Date) => {
-      setCalendarDate(date)
-      setView('months')
-    }
-
-    const handleYearKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, date: Date) => {
-      if (event.code === 'Space' || event.key === 'Enter') {
-        handleYearClick(date)
-      }
-    }
-
     return (
-      <div className={classNames('calendars', className)}>
+      <div
+        className={classNames(
+          'calendars',
+          {
+            [`select-${selectionType}`]: selectionType && view === 'days',
+            'show-week-numbers': showWeekNumber,
+          },
+          className,
+        )}
+        ref={forkedRef}
+      >
         {_calendarDate &&
-          Array.from({ length: calendars }, (_, index) => (
-            <div className={classNames('calendar', view)} key={index} ref={ref}>
-              <Navigation
-                addMonths={index}
-                calendarDate={_calendarDate}
-                locale={locale}
-                navigation={navigation}
-                navNextDoubleIcon={navNextDoubleIcon}
-                navNextIcon={navNextIcon}
-                navPrevDoubleIcon={navPrevDoubleIcon}
-                navPrevIcon={navPrevIcon}
-                navYearFirst={navYearFirst}
-                onMonthClick={() => setView('months')}
-                onNavigationClick={handleNavigationOnClick}
-                onYearClick={() => setView('years')}
-                view={view}
-              />
-              <Calendar
-                addMonths={index}
-                calendarDate={_calendarDate}
-                dayFormat={dayFormat}
-                disabledDates={disabledDates}
-                endDate={_endDate}
-                firstDayOfWeek={firstDayOfWeek}
-                hoverDate={_hoverDate}
-                locale={locale}
-                maxDate={_maxDate}
-                minDate={_minDate}
-                onDayClick={(date) => handleDayClick(date, index)}
-                onDayKeyDown={(event, date) => handleDayKeyDown(event, date, index)}
-                onDayMouseEnter={handleDayMouseEnter}
-                onDayMouseLeave={handleDayMouseLeave}
-                onMonthClick={handleMonthClick}
-                onMonthKeyDown={handleMonthKeyDown}
-                onYearClick={handleYearClick}
-                onYearKeyDown={handleYearKeyDown}
-                selectEndDate={_selectEndDate}
-                selectAdjacementDays={selectAdjacementDays}
-                showAdjacementDays={showAdjacementDays}
-                startDate={_startDate}
-                view={view}
-                weekdayFormat={weekdayFormat}
-              />
-            </div>
-          ))}
+          Array.from({ length: calendars }, (_, index) => {
+            const calendarDate = getCalendarDate(_calendarDate, index, view)
+            return (
+              <div className={classNames('calendar', view)} key={index}>
+                <Navigation
+                  calendarDate={calendarDate}
+                  locale={locale}
+                  navigation={navigation}
+                  navNextDoubleIcon={navNextDoubleIcon}
+                  navNextIcon={navNextIcon}
+                  navPrevDoubleIcon={navPrevDoubleIcon}
+                  navPrevIcon={navPrevIcon}
+                  navYearFirst={navYearFirst}
+                  onMonthClick={() => setView('months')}
+                  onNavigationClick={handleNavigationOnClick}
+                  onYearClick={() => setView('years')}
+                  view={view}
+                />
+                <Calendar
+                  calendarDate={calendarDate}
+                  dayFormat={dayFormat}
+                  disabledDates={disabledDates}
+                  endDate={_endDate}
+                  firstDayOfWeek={firstDayOfWeek}
+                  hoverDate={_hoverDate}
+                  locale={locale}
+                  maxDate={_maxDate}
+                  minDate={_minDate}
+                  onCalendarClick={(date) => handleCalendarClick(date, index)}
+                  onCalendarKeyDown={(event, date) => handleCalendarKeyDown(event, date, index)}
+                  onCalendarMouseEnter={handleCalendarMouseEnter}
+                  onCalendarMouseLeave={handleCalendarMouseLeave}
+                  order={index}
+                  selectAdjacementDays={selectAdjacementDays}
+                  selectEndDate={_selectEndDate}
+                  selectionType={selectionType}
+                  showAdjacementDays={showAdjacementDays}
+                  showWeekNumber={showWeekNumber}
+                  startDate={_startDate}
+                  view={view}
+                  weekdayFormat={weekdayFormat}
+                  weekNumbersLabel={weekNumbersLabel}
+                />
+              </div>
+            )
+          })}
       </div>
     )
   },
@@ -780,14 +980,17 @@ CCalendar.propTypes = {
   range: PropTypes.bool,
   selectAdjacementDays: PropTypes.bool,
   selectEndDate: PropTypes.bool,
+  selectionType: PropTypes.oneOf(['day', 'week', 'month', 'year']),
   showAdjacementDays: PropTypes.bool,
+  showWeekNumber: PropTypes.bool,
   startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   weekdayFormat: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.number,
     PropTypes.oneOf<'long' | 'narrow' | 'short'>(['long', 'narrow', 'short']),
   ]),
-  onDayHover: PropTypes.func,
+  weekNumbersLabel: PropTypes.string,
+  onDateHover: PropTypes.func,
   onCalendarDateChange: PropTypes.func,
   onEndDateChange: PropTypes.func,
   onSelectEndChange: PropTypes.func,