diff --git a/packages/smarthr-ui/src/components/Calendar/Calendar.tsx b/packages/smarthr-ui/src/components/Calendar/Calendar.tsx
index 3fc4529410..661a03d609 100644
--- a/packages/smarthr-ui/src/components/Calendar/Calendar.tsx
+++ b/packages/smarthr-ui/src/components/Calendar/Calendar.tsx
@@ -4,7 +4,9 @@ import dayjs from 'dayjs'
 import React, {
   ComponentProps,
   MouseEvent,
+  PropsWithChildren,
   forwardRef,
+  useCallback,
   useEffect,
   useId,
   useMemo,
@@ -13,13 +15,12 @@ import React, {
 import { tv } from 'tailwind-variants'
 
 import { Button } from '../Button'
-import { FaCaretDownIcon, FaCaretUpIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'
+import { FaCaretDownIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'
 import { Cluster } from '../Layout'
-import { Section } from '../SectioningContent'
 
 import { CalendarTable } from './CalendarTable'
 import { YearPicker } from './YearPicker'
-import { getFromDate, getToDate, isBetween, minDate } from './calendarHelper'
+import { getFromDate, getMonthArray, getToDate, isBetween, minDate } from './calendarHelper'
 
 type Props = {
   /** 選択可能な開始日 */
@@ -31,7 +32,8 @@ type Props = {
   /** 選択された日付 */
   value?: Date
 }
-type ElementProps = Omit<ComponentProps<'section'>, keyof Props>
+type ElementProps = Omit<ComponentProps<'div'>, keyof Props>
+type DayJsType = ReturnType<typeof dayjs>
 
 const calendar = tv({
   slots: {
@@ -41,108 +43,195 @@ const calendar = tv({
     yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold',
     monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex',
     tableLayout: 'shr-relative',
+    yearSelectButton:
+      'smarthr-ui-Calendar-selectingYear [&[aria-expanded="true"]_.smarthr-ui-Icon]:shr-rotate-180',
   },
 })
 
 export const Calendar = forwardRef<HTMLDivElement, Props & ElementProps>(
   ({ from = minDate, to, onSelectDate, value, className, ...props }, ref) => {
-    const { containerStyle, yearMonthStyle, headerStyle, monthButtonsStyle, tableLayoutStyle } =
-      useMemo(() => {
-        const { container, yearMonth, header, monthButtons, tableLayout } = calendar()
-        return {
-          containerStyle: container({ className }),
-          headerStyle: header(),
-          yearMonthStyle: yearMonth(),
-          monthButtonsStyle: monthButtons(),
-          tableLayoutStyle: tableLayout(),
+    const classNames = useMemo(() => {
+      const { container, yearMonth, header, monthButtons, tableLayout, yearSelectButton } =
+        calendar()
+
+      return {
+        container: container({ className }),
+        header: header(),
+        yearMonth: yearMonth(),
+        monthButtons: monthButtons(),
+        tableLayout: tableLayout(),
+        yearSelectButton: yearSelectButton(),
+      }
+    }, [className])
+
+    const formattedFrom = useMemo(() => {
+      const date = getFromDate(from)
+      const day = dayjs(date)
+
+      return {
+        day,
+        date,
+        year: day.year(),
+      }
+    }, [from])
+    const formattedTo = useMemo(() => {
+      const date = getToDate(to)
+      const day = dayjs(date)
+
+      return {
+        day,
+        date,
+        year: day.year(),
+      }
+    }, [to])
+
+    const isValidValue = useMemo(
+      () => value && isBetween(value, formattedFrom.date, formattedTo.date),
+      [value, formattedFrom.date, formattedTo.date],
+    )
+
+    const [currentMonth, setCurrentMonth] = useState(
+      (() => {
+        if (isValidValue) {
+          return dayjs(value)
         }
-      }, [className])
-    const fromDate = dayjs(getFromDate(from))
-    const toDate = dayjs(getToDate(to))
-    const today = dayjs()
-    const currentDay = toDate.isBefore(today) ? toDate : fromDate.isAfter(today) ? fromDate : today
-    const isValidValue = value && isBetween(value, fromDate.toDate(), toDate.toDate())
-
-    const [currentMonth, setCurrentMonth] = useState(isValidValue ? dayjs(value) : currentDay)
+
+        const today = dayjs()
+
+        return formattedTo.day.isBefore(today)
+          ? formattedTo.day
+          : formattedFrom.day.isAfter(today)
+            ? formattedFrom.day
+            : today
+      })(),
+    )
     const [isSelectingYear, setIsSelectingYear] = useState(false)
 
     const yearPickerId = useId()
 
     useEffect(() => {
-      if (value && isValidValue) {
+      if (isValidValue) {
         setCurrentMonth(dayjs(value))
       }
     }, [value, isValidValue])
 
-    const prevMonth = currentMonth.subtract(1, 'month')
-    const nextMonth = currentMonth.add(1, 'month')
+    const calculatedCurrentMonth = useMemo(
+      () => ({
+        prev: currentMonth.subtract(1, 'month'),
+        next: currentMonth.add(1, 'month'),
+        day: currentMonth,
+        months: getMonthArray(currentMonth.toDate()),
+        yearMonthStr: `${currentMonth.year()}年${currentMonth.month() + 1}月`,
+        selectedStr: currentMonth.toString(),
+      }),
+      [currentMonth],
+    )
+
+    const onSelectYear = useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        setCurrentMonth(currentMonth.year(parseInt(e.currentTarget.value, 10)))
+        setIsSelectingYear(false)
+      },
+      [currentMonth],
+    )
+
+    const onClickSelectYear = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      setIsSelectingYear((current) => !current)
+    }, [])
 
     return (
-      // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
-      <Section {...props} ref={ref} className={containerStyle}>
-        <header className={headerStyle}>
-          <div className={yearMonthStyle}>
-            {currentMonth.year()}年{currentMonth.month() + 1}月
-          </div>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation()
-              setIsSelectingYear(!isSelectingYear)
-            }}
-            size="s"
-            square
+      <div {...props} ref={ref} className={classNames.container}>
+        <header className={classNames.header}>
+          <YearMonthRender className={classNames.yearMonth}>
+            {calculatedCurrentMonth.yearMonthStr}
+          </YearMonthRender>
+          <YearSelectButton
             aria-expanded={isSelectingYear}
             aria-controls={yearPickerId}
-            className="smarthr-ui-Calendar-selectingYear"
-          >
-            {isSelectingYear ? (
-              <FaCaretUpIcon alt="年を選択する" />
-            ) : (
-              <FaCaretDownIcon alt="年を選択する" />
-            )}
-          </Button>
-          <Cluster gap={0.5} className={monthButtonsStyle}>
-            <Button
-              disabled={isSelectingYear || prevMonth.isBefore(fromDate, 'month')}
-              onClick={() => setCurrentMonth(prevMonth)}
-              size="s"
-              square
-              className="smarthr-ui-Calendar-monthButtonPrev"
-            >
-              <FaChevronLeftIcon alt="前の月へ" />
-            </Button>
-            <Button
-              disabled={isSelectingYear || nextMonth.isAfter(toDate, 'month')}
-              onClick={() => setCurrentMonth(nextMonth)}
-              size="s"
-              square
-              className="smarthr-ui-Calendar-monthButtonNext"
-            >
-              <FaChevronRightIcon alt="次の月へ" />
-            </Button>
-          </Cluster>
+            onClick={onClickSelectYear}
+            className={classNames.yearSelectButton}
+          />
+          <MonthDirectionCluster
+            isSelectingYear={isSelectingYear}
+            directionMonth={calculatedCurrentMonth}
+            from={formattedFrom.day}
+            to={formattedTo.day}
+            setCurrentMonth={setCurrentMonth}
+            className={classNames.monthButtons}
+          />
         </header>
-        <div className={tableLayoutStyle}>
+        <div className={classNames.tableLayout}>
           <YearPicker
-            fromYear={fromDate.year()}
-            toYear={toDate.year()}
+            fromYear={formattedFrom.year}
+            toYear={formattedTo.year}
             selectedYear={value?.getFullYear()}
-            onSelectYear={(year) => {
-              setCurrentMonth(currentMonth.year(year))
-              setIsSelectingYear(false)
-            }}
+            onSelectYear={onSelectYear}
             isDisplayed={isSelectingYear}
             id={yearPickerId}
           />
           <CalendarTable
-            current={currentMonth.toDate()}
-            from={fromDate.toDate()}
-            to={toDate.toDate()}
+            current={calculatedCurrentMonth}
+            from={formattedFrom.date}
+            to={formattedTo.date}
             onSelectDate={onSelectDate}
-            selected={isValidValue ? value : null}
+            selectedDayStr={isValidValue ? calculatedCurrentMonth.selectedStr : ''}
           />
         </div>
-      </Section>
+      </div>
     )
   },
 )
+
+const YearMonthRender = React.memo<PropsWithChildren<{ className: string }>>(
+  ({ children, className }) => <div className={className}>{children}</div>,
+)
+
+const YearSelectButton = React.memo<{
+  'aria-expanded': boolean
+  'aria-controls': string
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+  className: string
+}>((rest) => (
+  <Button {...rest} size="s" square>
+    <FaCaretDownIcon alt="年を選択する" />
+  </Button>
+))
+
+const MonthDirectionCluster = React.memo<{
+  isSelectingYear: boolean
+  directionMonth: {
+    prev: DayJsType
+    next: DayJsType
+  }
+  from: DayJsType
+  to: DayJsType
+  setCurrentMonth: (day: DayJsType) => void
+  className: string
+}>(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {
+  const onClickMonthPrev = useCallback(() => setCurrentMonth(prev), [prev, setCurrentMonth])
+  const onClickMonthNext = useCallback(() => setCurrentMonth(next), [next, setCurrentMonth])
+
+  return (
+    <Cluster gap={0.5} className={className}>
+      <Button
+        disabled={isSelectingYear || prev.isBefore(from, 'month')}
+        onClick={onClickMonthPrev}
+        size="s"
+        square
+        className="smarthr-ui-Calendar-monthButtonPrev"
+      >
+        <FaChevronLeftIcon alt="前の月へ" />
+      </Button>
+      <Button
+        disabled={isSelectingYear || next.isAfter(to, 'month')}
+        onClick={onClickMonthNext}
+        size="s"
+        square
+        className="smarthr-ui-Calendar-monthButtonNext"
+      >
+        <FaChevronRightIcon alt="次の月へ" />
+      </Button>
+    </Cluster>
+  )
+})
diff --git a/packages/smarthr-ui/src/components/Calendar/CalendarTable.tsx b/packages/smarthr-ui/src/components/Calendar/CalendarTable.tsx
index 782dae22ba..6e61e89f1e 100644
--- a/packages/smarthr-ui/src/components/Calendar/CalendarTable.tsx
+++ b/packages/smarthr-ui/src/components/Calendar/CalendarTable.tsx
@@ -1,14 +1,17 @@
 import dayjs from 'dayjs'
-import React, { ComponentPropsWithoutRef, FC, MouseEvent, useMemo } from 'react'
+import React, { ComponentPropsWithoutRef, FC, MouseEvent, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { UnstyledButton } from '../Button'
 
-import { daysInWeek, getMonthArray, isBetween } from './calendarHelper'
+import { daysInWeek, isBetween } from './calendarHelper'
 
 type Props = {
   /** 現在の日付 */
-  current: Date
+  current: {
+    day: DayJsType
+    months: Array<Array<number | null>>
+  }
   /** 選択可能な開始日 */
   from: Date
   /** 選択可能な終了日 */
@@ -16,10 +19,12 @@ type Props = {
   /** トリガのセレクトイベントを処理するハンドラ */
   onSelectDate: (e: MouseEvent, date: Date) => void
   /** 選択された日付 */
-  selected?: Date | null
+  selectedDayStr: string
 }
 type ElementProps = Omit<ComponentPropsWithoutRef<'table'>, keyof Props>
 
+type DayJsType = ReturnType<typeof dayjs>
+
 const calendarTable = tv({
   slots: {
     wrapper: 'shr-px-0.75 shr-pb-1 shr-pt-0.25',
@@ -28,20 +33,11 @@ const calendarTable = tv({
     td: 'smarthr-ui-CalendarTable-dataCell shr-p-0 shr-align-middle',
     cellButton:
       'shr-group shr-flex shr-items-center shr-justify-center shr-px-0.5 shr-py-0.25 disabled:shr-cursor-not-allowed disabled:shr-text-disabled',
-    dateCell:
+    dateCell: [
       'shr-box-border shr-flex shr-h-[1.75rem] shr-w-[1.75rem] shr-items-center shr-justify-center shr-rounded-[50%] shr-leading-[0] group-[:not(:disabled)]:group-hover:shr-bg-base-grey group-[:not(:disabled)]:group-hover:shr-text-black',
-  },
-  variants: {
-    isToday: {
-      true: {
-        dateCell: 'shr-border-shorthand contrast-more:shr-border-high-contrast',
-      },
-    },
-    isSelected: {
-      true: {
-        dateCell: '[&&&&]:shr-bg-main [&&&&]:shr-text-white',
-      },
-    },
+      '[[aria-pressed="true"]>&&&]:shr-bg-main [[aria-pressed="true"]>&&&]:shr-text-white',
+      '[[data-is-today="true"]>&&&]:shr-border-shorthand [[aria-pressed="true"]>&&&]:contrast-more:shr-border-high-contrast',
+    ],
   },
 })
 
@@ -50,75 +46,50 @@ export const CalendarTable: FC<Props & ElementProps> = ({
   from,
   to,
   onSelectDate,
-  selected,
+  selectedDayStr,
   className,
   ...props
 }) => {
-  const { wrapper, table, th, td, cellButton, dateCell } = calendarTable()
-  const { wrapperStyle, tableStyle, thStyle, tdStyle, cellButtonStyle } = useMemo(
-    () => ({
-      wrapperStyle: wrapper({ className }),
-      tableStyle: table(),
-      thStyle: th(),
-      tdStyle: td(),
-      cellButtonStyle: cellButton(),
-    }),
-    [cellButton, className, table, td, th, wrapper],
-  )
-  const currentDay = dayjs(current)
-  const selectedDay = selected ? dayjs(selected) : null
+  const classNames = useMemo(() => {
+    const { wrapper, table, th, td, cellButton, dateCell } = calendarTable()
+
+    return {
+      wrapper: wrapper({ className }),
+      table: table(),
+      th: th(),
+      td: td(),
+      cellButton: cellButton(),
+      dateCell: dateCell(),
+    }
+  }, [className])
 
-  const now = dayjs().startOf('date')
-  const fromDay = dayjs(from)
-  const toDay = dayjs(to)
+  // HINT: dayjsのisSameは文字列でも比較可能なため、cacheが効きやすいstringにする
+  const nowDateStr = dayjs().startOf('date').toString()
 
-  const array = getMonthArray(currentDay.toDate())
   return (
-    <div className={wrapperStyle}>
-      <table {...props} className={tableStyle}>
-        <thead>
-          <tr>
-            {daysInWeek.map((day, i) => (
-              <th key={i} className={thStyle}>
-                {day}
-              </th>
-            ))}
-          </tr>
-        </thead>
+    <div className={classNames.wrapper}>
+      <table {...props} className={classNames.table}>
+        <MemoizedThead thStyle={classNames.th} />
         <tbody>
-          {array.map((week, weekIndex) => (
+          {current.months.map((week, weekIndex) => (
             <tr key={weekIndex}>
-              {week.map((date, dateIndex) => {
-                const isOutRange =
-                  !date ||
-                  !isBetween(currentDay.date(date).toDate(), fromDay.toDate(), toDay.toDate())
-                const isSelectedDate =
-                  !!date && !!selectedDay && currentDay.date(date).isSame(selectedDay, 'date')
-                return (
-                  <td key={dateIndex} className={tdStyle}>
-                    {date && (
-                      <UnstyledButton
-                        disabled={isOutRange}
-                        onClick={(e) =>
-                          !isOutRange && onSelectDate(e, currentDay.date(date).toDate())
-                        }
-                        aria-pressed={isSelectedDate}
-                        type="button"
-                        className={cellButtonStyle}
-                      >
-                        <span
-                          className={dateCell({
-                            isToday: currentDay.date(date).isSame(now, 'date'),
-                            isSelected: isSelectedDate,
-                          })}
-                        >
-                          {date}
-                        </span>
-                      </UnstyledButton>
-                    )}
-                  </td>
-                )
-              })}
+              {week.map((date, dateIndex) =>
+                date ? (
+                  <SelectTdButton
+                    key={dateIndex}
+                    date={date}
+                    currentDay={current.day}
+                    selectedDayStr={selectedDayStr}
+                    from={from}
+                    to={to}
+                    nowDateStr={nowDateStr}
+                    onClick={onSelectDate}
+                    classNames={classNames}
+                  />
+                ) : (
+                  <NullTd key={dateIndex} className={classNames.td} />
+                ),
+              )}
             </tr>
           ))}
         </tbody>
@@ -126,3 +97,73 @@ export const CalendarTable: FC<Props & ElementProps> = ({
     </div>
   )
 }
+
+const MemoizedThead = React.memo<{ thStyle: string }>(({ thStyle }) => (
+  <thead>
+    <tr>
+      {daysInWeek.map((day) => (
+        <th key={day} className={thStyle}>
+          {day}
+        </th>
+      ))}
+    </tr>
+  </thead>
+))
+
+const NullTd = React.memo<{ className: string }>(({ className }) => <td className={className} />)
+
+const SelectTdButton = React.memo<{
+  date: number
+  currentDay: DayJsType
+  selectedDayStr: string
+  from: Date
+  to: Date
+  nowDateStr: string
+  onClick: Props['onSelectDate']
+  classNames: {
+    td: string
+    cellButton: string
+    dateCell: string
+  }
+}>(({ date, currentDay, selectedDayStr, from, to, nowDateStr, onClick, classNames }) => {
+  const target = useMemo(() => {
+    const day = currentDay.date(date)
+
+    return {
+      day,
+      date: day.toDate(),
+    }
+  }, [currentDay, date])
+  const disabled = useMemo(() => !isBetween(target.date, from, to), [target.date, from, to])
+  const ariaPressed = useMemo(
+    () => target.day.isSame(selectedDayStr, 'date'),
+    [selectedDayStr, target.day],
+  )
+  const dataIsToday = useMemo(() => target.day.isSame(nowDateStr, 'date'), [nowDateStr, target.day])
+
+  const actualOnClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      onClick(e, target.date)
+    },
+    [onClick, target.date],
+  )
+
+  return (
+    <td className={classNames.td}>
+      <UnstyledButton
+        type="button"
+        disabled={disabled}
+        aria-pressed={ariaPressed}
+        onClick={actualOnClick}
+        className={classNames.cellButton}
+        data-is-today={dataIsToday}
+      >
+        <SelectButtonTdDateCell className={classNames.dateCell}>{date}</SelectButtonTdDateCell>
+      </UnstyledButton>
+    </td>
+  )
+})
+
+const SelectButtonTdDateCell = React.memo<{ children: number; className: string }>(
+  ({ children, className }) => <span className={className}>{children}</span>,
+)
diff --git a/packages/smarthr-ui/src/components/Calendar/YearPicker.tsx b/packages/smarthr-ui/src/components/Calendar/YearPicker.tsx
index f0c1363745..724113787c 100644
--- a/packages/smarthr-ui/src/components/Calendar/YearPicker.tsx
+++ b/packages/smarthr-ui/src/components/Calendar/YearPicker.tsx
@@ -1,9 +1,9 @@
-import React, { ComponentProps, FC, useEffect, useMemo, useRef } from 'react'
+import React, { ComponentProps, FC, RefObject, useEffect, useMemo, useRef } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { UnstyledButton } from '../Button'
 
-type Props = {
+type AbstractProps = {
   /** 選択された年 */
   selectedYear?: number
   /** 選択可能な開始年 */
@@ -11,13 +11,15 @@ type Props = {
   /** 選択可能な終了年 */
   toYear: number
   /** トリガのセレクトイベントを処理するハンドラ */
-  onSelectYear: (year: number) => void
+  onSelectYear: (e: React.MouseEvent<HTMLButtonElement>) => void
   /** 表示フラグ */
   isDisplayed: boolean
   /** HTMLのid属性 */
   id: string
 }
-type ElementProps = Omit<ComponentProps<'div'>, keyof Props>
+type ElementProps = Omit<ComponentProps<'div'>, keyof AbstractProps>
+type Props = AbstractProps & ElementProps
+type ActualProps = Omit<Props, 'isDisplayed'>
 
 const yearPicker = tv({
   slots: {
@@ -26,82 +28,99 @@ const yearPicker = tv({
       'shr-box-border shr-flex shr-h-full shr-w-full shr-flex-wrap shr-items-start shr-overflow-y-auto shr-px-0.25 shr-py-0.5',
     yearButton:
       'smarthr-ui-YearPicker-selectYear shr-group shr-flex shr-w-1/4 shr-items-center shr-justify-center shr-px-0 shr-py-0.5 shr-leading-none',
-    yearWrapper:
+    yearWrapper: [
       'shr-box-border shr-inline-block shr-rounded-full shr-px-0.75 shr-py-0.5 shr-text-base shr-leading-none group-hover:shr-bg-base-grey group-hover:shr-text-black',
-  },
-  variants: {
-    isDisplayed: {
-      false: {
-        overlay: 'shr-hidden',
-      },
-    },
-    isThisYear: {
-      true: {
-        yearWrapper: 'shr-border-shorthand',
-      },
-    },
-    isSelected: {
-      true: {
-        yearWrapper: 'shr-bg-main shr-text-white',
-      },
-    },
+      '[[data-this-year="true"]>&]:shr-border-shorthand',
+      '[[aria-pressed="true"]>&]:shr-bg-main [[aria-pressed="true"]>&]:shr-text-white',
+    ],
   },
 })
 
-export const YearPicker: FC<Props & ElementProps> = ({
+export const YearPicker: FC<Props & ElementProps> = ({ isDisplayed, ...rest }) =>
+  isDisplayed ? <ActualYearPicker {...rest} /> : null
+
+const ActualYearPicker: FC<ActualProps> = ({
   selectedYear,
   fromYear,
   toYear,
   onSelectYear,
-  isDisplayed,
   id,
   ...props
 }) => {
-  const { overlay, container, yearButton, yearWrapper } = yearPicker()
-  const { overlayStyle, containerStyle, yearButtonStyle } = useMemo(
-    () => ({
-      overlayStyle: overlay({ isDisplayed }),
-      containerStyle: container(),
-      yearButtonStyle: yearButton(),
-    }),
-    [container, isDisplayed, overlay, yearButton],
-  )
+  const classNames = useMemo(() => {
+    const { overlay, container, yearButton, yearWrapper } = yearPicker()
+
+    return {
+      overlay: overlay(),
+      container: container(),
+      yearButton: yearButton(),
+      yearWrapper: yearWrapper(),
+    }
+  }, [])
   const focusingRef = useRef<HTMLButtonElement>(null)
 
-  const thisYear = new Date().getFullYear()
-  const numOfYear = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0)
-  const yearArray = Array(numOfYear)
-    .fill(null)
-    .map((_, i) => fromYear + i)
+  const thisYear = useMemo(() => new Date().getFullYear(), [])
+  const yearArray = useMemo(() => {
+    const length = Math.max(Math.min(toYear, 9999) - fromYear + 1, 0)
+    const result: number[] = []
+
+    for (let i = 0; i < length; i++) {
+      result[i] = fromYear + i
+    }
+
+    return result
+  }, [toYear, fromYear])
 
   useEffect(() => {
-    if (focusingRef.current && isDisplayed) {
+    if (focusingRef.current) {
+      // HINT: 現在の年に一度focusを当てることでtab移動をしやすくする
+      // focusを当てたままでは違和感があるため、blurで解除している
       focusingRef.current.focus()
       focusingRef.current.blur()
     }
-  }, [isDisplayed])
+  }, [])
 
   return (
-    <div {...props} id={id} className={overlayStyle}>
-      <div className={containerStyle}>
-        {yearArray.map((year) => {
-          const isThisYear = thisYear === year
-          const isSelectedYear = selectedYear === year
-          return (
-            <UnstyledButton
-              key={year}
-              onClick={() => onSelectYear(year)}
-              aria-pressed={isSelectedYear}
-              ref={isThisYear ? focusingRef : null}
-              className={yearButtonStyle}
-            >
-              <span className={yearWrapper({ isThisYear, isSelected: isSelectedYear })}>
-                {year}
-              </span>
-            </UnstyledButton>
-          )
-        })}
+    <div {...props} id={id} className={classNames.overlay}>
+      <div className={classNames.container}>
+        {yearArray.map((year) => (
+          <YearButton
+            key={year}
+            year={year}
+            thisYear={thisYear}
+            selected={selectedYear === year}
+            focusingRef={focusingRef}
+            className={classNames.yearButton}
+            childrenStyle={classNames.yearWrapper}
+            onClick={onSelectYear}
+          />
+        ))}
       </div>
     </div>
   )
 }
+
+const YearButton = React.memo<{
+  year: number
+  thisYear: number
+  selected: boolean
+  focusingRef: RefObject<HTMLButtonElement>
+  className: string
+  childrenStyle: string
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+}>(({ year, thisYear, selected, focusingRef, onClick, className, childrenStyle }) => {
+  const isThisYear = thisYear === year
+
+  return (
+    <UnstyledButton
+      ref={isThisYear ? focusingRef : null}
+      value={year}
+      aria-pressed={selected}
+      onClick={onClick}
+      className={className}
+      data-this-year={isThisYear}
+    >
+      <span className={childrenStyle}>{year}</span>
+    </UnstyledButton>
+  )
+})
diff --git a/packages/smarthr-ui/src/components/Calendar/calendarHelper.ts b/packages/smarthr-ui/src/components/Calendar/calendarHelper.ts
index e81d97caf1..fd9b28d6d9 100644
--- a/packages/smarthr-ui/src/components/Calendar/calendarHelper.ts
+++ b/packages/smarthr-ui/src/components/Calendar/calendarHelper.ts
@@ -31,20 +31,29 @@ export function getToDate(date?: Date): Date {
 }
 
 export function getMonthArray(date: Date) {
-  const startDay = dayjs(date).date(1).day()
-  const lastDate = dayjs(date).add(1, 'month').date(0).date()
+  const day = dayjs(date)
+  const startDay = day.date(1).day()
+  const lastDate = day.add(1, 'month').date(0).date()
   const numOfWeek = Math.ceil((lastDate + startDay) / 7)
 
-  return Array.from({ length: numOfWeek }).map((_, weekIndex) => {
+  const result: Array<Array<number | null>> = []
+
+  for (let weekIndex = 0; weekIndex < numOfWeek; weekIndex++) {
     // 週毎の配列を形成
     const startDateInWeek = weekIndex * 7 - startDay + 1
-    return Array.from({ length: 7 }).map((__, dateIndex) => {
+    const weekNumbers: Array<number | null> = []
+
+    for (let dateIndex = 0; dateIndex < 7; dateIndex++) {
       // 1週の配列を形成
       const dateNum = startDateInWeek + dateIndex
 
-      return dateNum > 0 && dateNum <= lastDate ? dateNum : null
-    })
-  })
+      weekNumbers[dateIndex] = dateNum > 0 && dateNum <= lastDate ? dateNum : null
+    }
+
+    result[weekIndex] = weekNumbers
+  }
+
+  return result
 }
 
 export function isBetween(date: Date, from: Date, to: Date) {