@coreui/react-pro 5.10.0 → 5.11.0

package/src/components/calendar/CCalendar.tsx

@@ -1,595 +1,250 @@
-import React, { forwardRef, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CButton } from '../button/CButton'
+import { CCalendarNavigation } from './CCalendarNavigation'
 
 import {
   convertToDateObject,
-  createGroupsInArray,
   getCalendarDate,
   getDateBySelectionType,
-  getMonthDetails,
-  getMonthsNames,
-  getYears,
+  getSelectableDates,
   isDateDisabled,
-  isDateInRange,
-  isDateSelected,
   isDisableDateInRange,
   isSameDateAs,
-  isToday,
 } from './utils'
+import type { DisabledDate, SelectionTypes, ViewTypes } from './types'
 
 import { useForkedRef, useStateWithCallback } from '../../hooks'
-
-export type DisabledDate = ((date: Date) => boolean) | Date | Date[]
+import { CCalendarPanel } from './CCalendarPanel'
 
 export interface CCalendarProps {
   /**
-   * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+   * A string that provides an accessible label for the button that navigates to the next month in the React Calendar component. This label is read by screen readers to describe the action associated with the button. Customize for a more accessible calendar experience.
    *
+   * @default 'Next month'
    * @since 5.5.0
    */
+
   ariaNavNextMonthLabel?: string
+
   /**
-   * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+   * A string that provides an accessible label for the button that navigates to the next year in the React Calendar component. Screen readers utilize this label to inform users of the button's functionality, aiding in a more inclusive application.
    *
+   * @default 'Next year'
    * @since 5.5.0
    */
   ariaNavNextYearLabel?: string
+
   /**
-   * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+   * A string that provides an accessible label for the button that navigates to the previous month in the React Calendar component. This label is announced by screen readers, ensuring clarity around the button's purpose.
    *
+   * @default 'Previous month'
    * @since 5.5.0
    */
   ariaNavPrevMonthLabel?: string
+
   /**
-   * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+   * A string that provides an accessible label for the button that navigates to the previous year in the React Calendar component. Use it to enhance the experience for screen readers and further accessibility.
    *
+   * @default 'Previous year'
    * @since 5.5.0
    */
   ariaNavPrevYearLabel?: string
+
   /**
-   * Default date of the component
+   * Defines the initial date or reference date for the React Calendar component. This date can be either a Date object or a string that can be converted into a valid date.
    */
   calendarDate?: Date | string | null
+
   /**
-   * The number of calendars that render on desktop devices.
+   * Specifies how many individual calendars should be displayed side by side on desktop devices. Increasing this number allows your users to view multiple months (or years, etc.) simultaneously.
    */
   calendars?: number
+
   /**
-   * A string of all className you want applied to the component.
+   * A string of all classNames you want to apply to the outermost container of the React Calendar component. Use this to style or theme your calendar.
    */
   className?: string
+
   /**
-   * Set the format of day name.
+   * Sets the format for day names. Accepts either a built-in format ('numeric' or '2-digit') or a custom function to return any desired string or number for the day.
    *
    * @default 'numeric'
    * @since 4.3.0
    */
   dayFormat?: 'numeric' | '2-digit' | ((date: Date) => string | number)
+
   /**
-   * Specify the list of dates that cannot be selected.
+   * Specifies one or more dates that cannot be selected by the user. This is useful for disabling weekends, holidays, or any dates that you need to restrict within your React Calendar component.
    */
   disabledDates?: DisabledDate | DisabledDate[]
+
   /**
-   * Initial selected to date (range).
+   * Defines the initially selected ending date (applicable when using range selection). Accepts both Date objects and valid date strings.
    */
   endDate?: Date | string | null
+
   /**
-   * Sets the day of start week.
-   * - 0 - Sunday,
-   * - 1 - Monday,
-   * - 2 - Tuesday,
-   * - 3 - Wednesday,
-   * - 4 - Thursday,
-   * - 5 - Friday,
-   * - 6 - Saturday,
+   * Sets the first day of the week. This can be adjusted for different locales or preferences:
+   * - `0` = Sunday
+   * - `1` = Monday
+   * - `2` = Tuesday
+   * - `3` = Wednesday
+   * - `4` = Thursday
+   * - `5` = Friday
+   * - `6` = Saturday
    *
    * @default 1
    */
   firstDayOfWeek?: number
+
   /**
-   * Sets the default locale for components. If not set, it is inherited from the browser.
+   * Indicates the locale for the React Calendar component. If not explicitly provided, it inherits the locale settings from the browser.
    *
    * @default 'default'
    */
   locale?: string
+
   /**
-   * Max selectable date.
+   * The maximum date that can be selected. Any date beyond this value will be disabled within the calendar. This is often used to restrict future selections.
    */
   maxDate?: Date | string | null
+
   /**
-   * Min selectable date.
+   * The minimum date that can be selected. Any date before this value will be disabled in the calendar. Useful for preventing selection of past dates or creating limited booking windows.
    */
   minDate?: Date | string | null
+
   /**
-   * Show arrows navigation.
+   * Toggles display of arrow-based navigation (previous/next controls) in the React Calendar component. If set to `false`, you can build custom navigation or handle the navigation programmatically.
    */
   navigation?: boolean
+
   /**
-   * The custom next icon.
+   * Customizes the icon for navigating to the next view (month, year, etc.) depending on the current view. Accepts any valid `ReactNode`, enabling you to display text, images, or icons.
    */
   navNextIcon?: ReactNode
+
   /**
-   * The custom next double icon.
+   * Customizes the icon for navigating multiple steps forward (double jump), e.g., skipping multiple months or years at once. Ideal for quick navigation through large date ranges.
    */
   navNextDoubleIcon?: ReactNode
+
   /**
-   * The custom prev icon.
+   * Customizes the icon for navigating to the previous view in the calendar. Accepts any valid ReactNode to provide flexible styling or theming.
    */
   navPrevIcon?: ReactNode
+
   /**
-   * The custom prev double icon.
+   * Customizes the icon for a double jump backward (e.g., jumping multiple months or years at once). This feature simplifies larger date range navigation within your React Calendar component.
    */
   navPrevDoubleIcon?: ReactNode
+
   /**
-   * Reorder year-month navigation, and render year first.
+   * Reorders the year and month navigation, rendering the year selector first. This offers a different layout for users, particularly useful if you want to prioritize quick year changes.
    *
+   * @default false
    * @since 4.3.0
    */
   navYearFirst?: boolean
+
   /**
-   * Allow range selection.
+   * Enables range selection mode in your React Calendar component, allowing users to select two dates for a range (start and end). Once enabled, the component will manage state for both dates.
    */
   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.
+   * Sets whether days from adjacent months (shown at the start/end of the current view) are selectable. This only applies if `showAdjacementDays` is set to `true`.
    *
+   * @default false
    * @since 4.11.0
    */
   selectAdjacementDays?: boolean
+
   /**
-   * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+   * Controls whether the calendar should display dates from previous or next months (non-selectable if `selectAdjacementDays` is `false`). This can make the calendar visually continuous.
    *
+   * @default true
    * @since 4.11.0
    */
   showAdjacementDays?: boolean
+
   /**
-   * Set whether to display week numbers in the calendar.
+   * Toggles the display of week numbers (ISO 8601) in the calendar's left column. Particularly beneficial for applications where users need to see the week index for scheduling or reporting.
    *
+   * @default false
    * @since 5.0.0
    */
   showWeekNumber?: boolean
+
   /**
-   * Toggle select mode between start and end date.
+   * Indicates if the user's current selection is targeting the end date in range selection mode. Primarily used for controlled components where you need to manage which date (start or end) is currently active.
    */
   selectEndDate?: boolean
+
   /**
-   * Specify the type of date selection as day, week, month, or year.
+   * Specifies the selection type for the React Calendar component. Supports:
+   * - `day`: Regular day selection (default)
+   * - `week`: Select an entire week
+   * - `month`: Select an entire month
+   * - `year`: Select an entire year
    *
+   * @default 'day'
    * @since 5.0.0
    */
-  selectionType?: 'day' | 'week' | 'month' | 'year'
+  selectionType?: SelectionTypes
+
   /**
-   * Initial selected date.
+   * Defines the initially selected starting date. This date can be a Date object or a string convertible into a valid date. Useful when you want to show a pre-selected date.
    */
   startDate?: Date | string | null
+
   /**
-   * Set length or format of day name.
+   * Sets the format or length of the weekday names displayed in the calendar header. You can use numeric values like 2 (two-letter abbreviations) or built-in string formats like `'long'`, `'narrow'`, and `'short'`, or provide a custom function to fully control how weekdays are displayed.
    *
    * @default 2
    */
   weekdayFormat?: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
+
   /**
-   * Label displayed over week numbers in the calendar.
+   * Defines the label that appears above the week numbers column. For example, you might label it `'WK'` or `'Week #'`.
    *
    * @since 5.0.0
    */
   weekNumbersLabel?: string
+
   /**
-   * Callback fired when the calendar date changed.
+   * Callback fired when the calendar's reference date (i.e., the date indicating which month/year is currently displayed) changes. Receives the new `Date | string` as an argument for further handling.
    */
   onCalendarDateChange?: (date: Date | string) => void
+
   /**
-   * Callback fired when the user hovers over the calendar cell.
+   * Callback fired when the user hovers over a calendar cell. The argument is the date of the cell that the user is currently hovering.
    */
   onDateHover?: (date: Date | string | null) => void
+
   /**
-   * Callback fired when the start date changed.
+   * Callback triggered when the start date of the selection changes. Useful for updating other parts of your application or performing side effects based on the newly chosen start date.
    */
-  onStartDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void // TODO: remove formatedDate?
+  onStartDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void
+
   /**
-   * Callback fired when the end date changed.
+   * Callback triggered when the end date of the selection changes. Handy for synchronizing the selected date range with external states or components.
    */
-  onEndDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void // TODO: remove formatedDate?
+  onEndDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void
+
   /**
-   * Callback fired when the selection type changed.
+   * Callback fired when toggling between selecting the start date and the end date in range selection mode. Receives a boolean indicating if the user is currently selecting the end date.
    */
   onSelectEndChange?: (value: boolean) => void
+
   /**
-   * Callback fired when the view type of calendar changed.
+   * Callback fired when the calendar's view changes between days, months, or years. For instance, moving from day view to month view or from month view to year view.
    */
   onViewChanged?: (view: string) => void
 }
 
-const Calendar = (props: {
-  calendarDate: Date
-  dayFormat?: 'numeric' | '2-digit' | ((date: Date) => string | number)
-  disabledDates?: DisabledDate | DisabledDate[]
-  endDate: Date | null
-  firstDayOfWeek: number
-  hoverDate: Date | null
-  locale: string
-  maxDate: Date | null
-  minDate: Date | null
-  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: 'days' | 'months' | 'years'
-  weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
-  weekNumbersLabel: string | undefined
-}) => {
-  const {
-    calendarDate,
-    dayFormat,
-    disabledDates,
-    endDate,
-    firstDayOfWeek,
-    hoverDate,
-    locale,
-    maxDate,
-    minDate,
-    onCalendarClick,
-    onCalendarKeyDown,
-    onCalendarMouseEnter,
-    onCalendarMouseLeave,
-    selectAdjacementDays,
-    selectEndDate,
-    selectionType,
-    showWeekNumber,
-    showAdjacementDays,
-    startDate,
-    view,
-    weekdayFormat,
-    weekNumbersLabel,
-  } = props
-  const [listOfMonths, setListOfMonths] = useState<string[][]>([])
-
-  useEffect(() => {
-    setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4))
-  }, [])
-
-  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
-                className="calendar-cell"
-                abbr={date.toLocaleDateString(locale, { weekday: 'long' })}
-                key={idx}
-              >
-                <div className="calendar-header-cell-inner">
-                  {typeof weekdayFormat === 'function'
-                    ? weekdayFormat(date)
-                    : typeof weekdayFormat === 'string'
-                      ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                      : date
-                          .toLocaleDateString(locale, { weekday: 'long' })
-                          .slice(0, weekdayFormat)}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-      )}
-      <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)
-            const isSelected = isDateSelected(date, startDate, endDate)
-            const current = week.days.some((day) => day.month === 'current')
-            return (
-              <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: isSelected,
-                })}
-                key={index}
-                tabIndex={selectionType === 'week' && current && !isDisabled ? 0 : -1}
-                {...(isSelected && { 'aria-selected': true })}
-                {...(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)
-                  const isSelected = isDateSelected(date, startDate, endDate)
-                  return month === 'current' || showAdjacementDays ? (
-                    <td
-                      className={classNames('calendar-cell', {
-                        ...(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: isSelected,
-                        }),
-                        [month]: true,
-                        today: month === 'current' && isToday(date),
-                      })}
-                      key={idx}
-                      tabIndex={
-                        selectionType === 'day' &&
-                        (month === 'current' || selectAdjacementDays) &&
-                        !isDisabled
-                          ? 0
-                          : -1
-                      }
-                      title={date.toLocaleDateString(locale)}
-                      {...(isSelected && { 'aria-selected': true })}
-                      {...(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: () => onCalendarMouseLeave(),
-                        })}
-                    >
-                      <div className="calendar-cell-inner">
-                        {typeof dayFormat === 'function'
-                          ? dayFormat(date)
-                          : date.toLocaleDateString(locale, { day: dayFormat })}
-                      </div>
-                    </td>
-                  ) : (
-                    <td key={idx}></td>
-                  )
-                })}
-              </tr>
-            )
-          })}
-        {view === 'months' &&
-          listOfMonths.map((row, index) => {
-            return (
-              <tr key={index}>
-                {row.map((month, idx) => {
-                  const monthNumber = index * 3 + idx
-                  const date = new Date(calendarDate.getFullYear(), monthNumber, 1)
-                  const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
-                  const isSelected = isDateSelected(date, startDate, endDate)
-                  return (
-                    <td
-                      className={classNames('calendar-cell', {
-                        disabled: isDisabled,
-                        selected: isSelected,
-                        'range-hover':
-                          selectionType === 'month' &&
-                          (hoverDate && selectEndDate
-                            ? isDateInRange(date, startDate, hoverDate)
-                            : isDateInRange(date, hoverDate, endDate)),
-                        range: isDateInRange(date, startDate, endDate),
-                      })}
-                      key={idx}
-                      tabIndex={isDisabled ? -1 : 0}
-                      {...(isSelected && { 'aria-selected': true })}
-                      {...(!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>
-                  )
-                })}
-              </tr>
-            )
-          })}
-        {view === 'years' &&
-          listOfYears.map((row, index) => {
-            return (
-              <tr key={index}>
-                {row.map((year, idx) => {
-                  const date = new Date(year, 0, 1)
-                  const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
-                  const isSelected = isDateSelected(date, startDate, endDate)
-                  return (
-                    <td
-                      className={classNames('calendar-cell year', {
-                        disabled: isDisabled,
-                        selected: isSelected,
-                        'range-hover':
-                          selectionType === 'year' &&
-                          (hoverDate && selectEndDate
-                            ? isDateInRange(date, startDate, hoverDate)
-                            : isDateInRange(date, hoverDate, endDate)),
-                        range: isDateInRange(date, startDate, endDate),
-                      })}
-                      key={idx}
-                      tabIndex={isDisabled ? -1 : 0}
-                      {...(isSelected && { 'aria-selected': true })}
-                      {...(!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' })}
-                      </div>
-                    </td>
-                  )
-                })}
-              </tr>
-            )
-          })}
-      </tbody>
-    </table>
-  )
-}
-
-const Navigation = (props: {
-  ariaNavNextMonthLabel: string
-  ariaNavNextYearLabel: string
-  ariaNavPrevMonthLabel: string
-  ariaNavPrevYearLabel: string
-  calendarDate: Date
-  locale: string
-  navigation: boolean
-  navNextDoubleIcon: ReactNode
-  navNextIcon: ReactNode
-  navPrevDoubleIcon: ReactNode
-  navPrevIcon: ReactNode
-  navYearFirst: boolean | undefined
-  onMonthClick: () => void
-  onNavigationClick: (direction: string, double?: boolean) => void
-  onYearClick: () => void
-  view: 'days' | 'months' | 'years'
-}) => {
-  const {
-    ariaNavNextMonthLabel,
-    ariaNavNextYearLabel,
-    ariaNavPrevMonthLabel,
-    ariaNavPrevYearLabel,
-    calendarDate,
-    locale,
-    navigation,
-    navNextDoubleIcon,
-    navNextIcon,
-    navPrevDoubleIcon,
-    navPrevIcon,
-    navYearFirst,
-    onMonthClick,
-    onNavigationClick,
-    onYearClick,
-    view,
-  } = props
-
-  return (
-    <div className="calendar-nav">
-      {navigation && (
-        <div className="calendar-nav-prev">
-          <CButton
-            color="transparent"
-            size="sm"
-            aria-label={ariaNavPrevYearLabel}
-            onClick={() => onNavigationClick('prev', true)}
-          >
-            {navPrevDoubleIcon ?? (
-              <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
-            )}
-          </CButton>
-          {view === 'days' && (
-            <CButton
-              color="transparent"
-              size="sm"
-              aria-label={ariaNavPrevMonthLabel}
-              onClick={() => onNavigationClick('prev')}
-            >
-              {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
-            </CButton>
-          )}
-        </div>
-      )}
-      <div
-        className="calendar-nav-date"
-        aria-live="polite"
-        {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
-      >
-        {view === 'days' && (
-          <CButton color="transparent" size="sm" onClick={() => navigation && onMonthClick()}>
-            {calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' })}
-          </CButton>
-        )}
-        <CButton
-          color="transparent"
-          size="sm"
-          onClick={() => navigation && onYearClick()}
-          {...(navYearFirst && { style: { order: '-1' } })}
-        >
-          {calendarDate && calendarDate.toLocaleDateString(locale, { year: 'numeric' })}
-        </CButton>
-      </div>
-      {navigation && (
-        <div className="calendar-nav-next">
-          {view === 'days' && (
-            <CButton
-              color="transparent"
-              size="sm"
-              aria-label={ariaNavNextMonthLabel}
-              onClick={() => onNavigationClick('next')}
-            >
-              {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
-            </CButton>
-          )}
-          <CButton
-            color="transparent"
-            size="sm"
-            aria-label={ariaNavNextYearLabel}
-            onClick={() => onNavigationClick('next', true)}
-          >
-            {navNextDoubleIcon ?? (
-              <span className="calendar-nav-icon calendar-nav-icon-double-next" />
-            )}
-          </CButton>
-        </div>
-      )}
-    </div>
-  )
-}
-
 export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
   (
     {
@@ -637,20 +292,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     const [_calendarDate, setCalendarDate] = useState<Date | null>(null)
 
     useEffect(() => {
-      if (selectionType === 'day' || selectionType === 'week') {
-        setView('days')
-        return
+      const viewMap = {
+        day: 'days',
+        week: 'days',
+        month: 'months',
+        year: 'years',
       }
 
-      if (selectionType === 'month') {
-        setView('months')
-        return
-      }
-
-      if (selectionType === 'year') {
-        setView('years')
-        return
-      }
+      setView((viewMap[selectionType] as ViewTypes) || 'days')
     }, [selectionType])
 
     useEffect(() => {
@@ -715,13 +364,21 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     }, [selectEndDate])
 
     useEffect(() => {
-      !isInitialMount.current &&
-        typeof _selectEndDate === 'boolean' &&
-        onSelectEndChange &&
-        onSelectEndChange(_selectEndDate)
+      if (!isInitialMount.current && typeof _selectEndDate === 'boolean') {
+        onSelectEndChange?.(_selectEndDate)
+      }
     }, [_selectEndDate])
 
-    const [view, setView] = useStateWithCallback<'days' | 'months' | 'years'>('days', onViewChanged)
+    const [view, setView] = useStateWithCallback<ViewTypes>('days', onViewChanged)
+    const [focusOn, setFocusOn] = useState<number | undefined>()
+
+    useEffect(() => {
+      if (typeof focusOn === 'number') {
+        const list = getSelectableDates(calendarRef.current as HTMLDivElement)
+        list[focusOn]?.focus()
+        setFocusOn(undefined)
+      }
+    }, [view])
 
     useEffect(() => {
       isInitialMount.current = false
@@ -736,19 +393,23 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       const month = _calendarDate.getMonth()
       const d = new Date(year, month, 1)
 
-      years && d.setFullYear(d.getFullYear() + years)
-      months && d.setMonth(d.getMonth() + months)
-      typeof setMonth === 'number' && d.setMonth(setMonth)
+      if (years) {
+        d.setFullYear(d.getFullYear() + years)
+      }
+
+      if (months) {
+        d.setMonth(d.getMonth() + months)
+      }
+
+      if (typeof setMonth === 'number') {
+        d.setMonth(setMonth)
+      }
 
       setCalendarDate(d)
-      onCalendarDateChange && onCalendarDateChange(d)
+      onCalendarDateChange?.(d)
     }
 
     const handleCalendarClick = (date: Date, index?: number) => {
-      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
-        return
-      }
-
       const _date = new Date(date)
 
       if (view === 'days') {
@@ -767,6 +428,11 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         return
       }
 
+      // Allow to change the calendarDate but not startDate or endDate
+      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
+        return
+      }
+
       if (range) {
         if (_selectEndDate) {
           setSelectEndDate(false)
@@ -814,6 +480,13 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
     ) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
+        if (
+          (view === 'months' && selectionType !== 'month') ||
+          (view === 'years' && selectionType !== 'year')
+        ) {
+          setFocusOn(0)
+        }
+
         handleCalendarClick(date, index)
       }
 
@@ -826,16 +499,16 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         event.preventDefault()
 
         if (
-          maxDate &&
-          date >= convertToDateObject(maxDate, selectionType) &&
+          _maxDate &&
+          date >= _maxDate &&
           (event.key === 'ArrowRight' || event.key === 'ArrowDown')
         ) {
           return
         }
 
         if (
-          minDate &&
-          date <= convertToDateObject(minDate, selectionType) &&
+          _minDate &&
+          date <= _minDate &&
           (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
         ) {
           return
@@ -847,12 +520,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
           element = element.closest('tr[tabindex="0"]') as HTMLElement
         }
 
-        const list: HTMLElement[] = [].concat(
-          ...Element.prototype.querySelectorAll.call(
-            calendarRef.current,
-            selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]',
-          ),
-        )
+        const list: HTMLElement[] = getSelectableDates(calendarRef.current as HTMLDivElement)
 
         const index = list.indexOf(element)
         const first = index === 0
@@ -889,19 +557,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
           }
 
           setTimeout(() => {
-            const _list: HTMLElement[] = [].concat(
-              ...Element.prototype.querySelectorAll.call(
-                element.parentNode?.parentNode,
-                'td[tabindex="0"], tr[tabindex="0"]',
-              ),
-            )
+            const _list = getSelectableDates(element.parentNode?.parentNode as HTMLDivElement)
 
             if (_list.length > 0 && event.key === 'ArrowRight') {
               _list[0].focus()
             }
 
             if (_list.length > 0 && event.key === 'ArrowLeft') {
-              _list[_list.length - 1].focus()
+              _list.at(-1)?.focus()
             }
 
             if (_list.length > 0 && event.key === 'ArrowDown') {
@@ -941,12 +604,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
       setHoverDate(date)
 
-      date && onDateHover && onDateHover(getDateBySelectionType(date, selectionType))
+      if (date) {
+        onDateHover?.(getDateBySelectionType(date, selectionType))
+      }
     }
 
     const handleCalendarMouseLeave = () => {
       setHoverDate(null)
-      onDateHover && onDateHover(null)
+      onDateHover?.(null)
     }
 
     const handleNavigationOnClick = (direction: string, double = false) => {
@@ -998,7 +663,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
             const calendarDate = getCalendarDate(_calendarDate, index, view)
             return (
               <div className={classNames('calendar', view)} key={index}>
-                <Navigation
+                <CCalendarNavigation
                   ariaNavNextMonthLabel={ariaNavNextMonthLabel}
                   ariaNavNextYearLabel={ariaNavNextYearLabel}
                   ariaNavPrevMonthLabel={ariaNavPrevMonthLabel}
@@ -1016,7 +681,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                   onYearClick={() => setView('years')}
                   view={view}
                 />
-                <Calendar
+                <CCalendarPanel
                   calendarDate={calendarDate}
                   dayFormat={dayFormat}
                   disabledDates={disabledDates}