[React] 프로젝트에 React DayPicker 적용하기

초대장만들기 미니 프로젝트를 진행하던 중 캘린더를 구현해야했는데 React DayPicker라는 라이브러리를 발견해 프로젝트에 적용해보려 한다.

⭐ 주요 기능

1. 요일, 범위 등을 선택시 date-fns를 날짜 라이브러리로 사용
2. 모든 언어 현지화 가능
3. 키보드로 컨트롤가능
4. WAI-ARIA지원
5. TypeScript로 작성됨
6. 손쉬운 스타일적용과 커스텀 설정 가능
7. 여러 캘린더 지원
8. 입력 필드 통합이 용이함

💻 적용

Install

npm install react-day-picker date-fns  # using npm
pnpm install react-day-picker date-fns # using pnpm
yarn add react-day-picker date-fns     # using yarn

코드

import { parseISO, format } from 'date-fns'
import { ko } from 'date-fns/locale'
import { DayPicker } from 'react-day-picker'
import 'react-day-picker/dist/style.css'

export default function Calendar({ date }: { date: string }) {
  // 사용할 날짜  2024년 3월 18일 데이터로 넣음
  const partyDate = parseISO(date)
  return (
    <>
      <div>
        <DayPicker locale={ko} month={partyDate} selected={partyDate} />
      </div>
    </>
  )
}

• locale: 언어선택
• month: 월 선택
• selected: 일자 표시

결과

• 스타일 적용 전(기본)
  

성공적으로 불러왔고 이후 스타일을 수정해줬다.

• 스타일 적용 후

const css = `
    .rdp-caption {
        display:none;
    }
    .rdp-cell {
// 일자에 마우스올렸을때 변화감지
        cursor: default;
        font-size:18px;
    }
    .rdp-head_cell{
// 요일 폰트 스타일 변경
        font-size:17px;
        font-weight:700;
    }
    .rdp-day.rdp-day_selected{
// 선택일자 스타일변경
        background:#FFC9F4;
    }
`
//css를 DayPicker태그위에 <style>태그를 넣고 그안에  적용해준다.
<div>
        <style>{css}</style>
        <DayPicker
          locale={ko}
          month={partyDate}
          selected={partyDate}
//캡션을 없애줌(캘린더위에 따로 날짜를 넣어두어 불필요했음..)
          formatters={{ formatCaption: () => '' }}
        />
</div>

결과

완성! 적용방식에 있어 매우편리해서 자주 사용할수 있을 거같다.