[react-day-picker] 캘린 라이브러리

입력된 예약 날짜를 다른 날로 수정할 때 날짜 라이브러리가 필요하다.

1. react-calendar

2. react-day-picker

유연하고 스타일링 가능한 날짜 선택이 가능한 라이브러리이다. 단일 날짜나 범위를 선택할 수 있다.

깃헙링크

간단하게 날짜를 선택 가능하며 1번 패키지보다
사용량이 높아 react-day-picker를 사용하기로 했다.

2.1 react-day-picker 설치

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

달력은 잘 불러오지만 날짜 범위를 지정하면
아래 사진과 같이 해당 날짜 범위가 색칠이 되지 않았다.

공식 홈페이지를 확인해보니 스타일을 적용해주는 css
파일이 있어 import해주니 달력 모양과 시작과 끝 날짜를 클릭하면 제대로 색칠되는 것을 볼 수 있다.

import 'react-day-picker/dist/style.css';

날짜 범위가 색칠된 색상을 바꾸고 싶은 경우, 전역 스타일을 관리하는 파일(global.css)에서 react-day-picker에 대한 색상을 원하는 색상으로 변경하면 된다.

참고로 :root에 작성하면 색상이 반영되지 않는다.
기존 --rdp-accent-color 색상은 파란색이며 날짜 범위에 색칠되는 색상이다. 나의 경우는 검정에 가까운 색상으로 변경해주었다.

* {
  --rdp-cell-size: 50px;
  --rdp-accent-color: #333333;
  --rdp-background-color: #e7edff;
  /* Switch to dark colors for dark themes */
  --rdp-accent-color-dark: #3003e1;
  --rdp-background-color-dark: #180270;
  /* Outline border for focused elements */
  --rdp-outline: 2px solid var(--rdp-accent-color);
  /* Outline border for focused and selected elements */
  --rdp-outline-selected: 2px solid #dbdbdb;
}

원하는 색상으로 날짜 범위가 색칠되는 것을 확인할 수 있다.

DayPicker에서 selected, onSelect부분에서 자꾸 타입이 잘 맞지 않는다는 오류가 나온다.

또한 한국어로 캘린더를 보여주고 싶으면 date-fns/locale에서 따로 한국어 버전을 import할수 있다.

💡 react-day-picker에서 날짜 범위를 명시하는 타입이 지정되어 있어 import하여 타입으로 지정해주면 된다. setRange는 undefined인 경우도 있어 유니언 타입으로 undefined를 지정해주니 오류 해결!

날짜 범위 지정하는 법 공식사이트

react-day-picker 타입 지정 공식 깃헙

기존에 색칠되어야 하는 날짜 범위를 초기값으로 설정한다.
DayPikcer 속성 selected를 통해 색칠되어야 하는 범위
데이터를 넣어준다.

추가) 원래 new Date(2024, 1, 1)로 설정하면 2월 1일로 해당되어 다음 달에 색칠되어 있는 것을 볼 수 있다.

여기서 두번째 인자가 월을 뜻하는데 0부터 1월에 시작된다. 따라서 1월에 해당하려면 0이 되어야 한다.

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

const pastMonth = new Date();

const page = () => {
  const defaultRange: DateRange = {
    from: new Date(2024, 0, 1),
    to: new Date(2024, 0, 2),
  };
  const [range, setRange] = useState<DateRange| undefined>(defaultRange);

 

  return (
          <p>
            일시 2024.01.01(일) 체크인 15:00 ~ 2024.01.02(월) 체크아웃 ~ 12:00
          </p>
          <button onClick={()=> setIsOpen(true)}>수정</button>
        </div>
            <DayPicker
              locale={ko}
              mode='range'
              defaultMonth={pastMonth}
              selected={range}
              onSelect={setRange}
            />
      </div>
    </div>
  );
};

export default page;

기존에 설정된 1월 1일과 2일에 색칠이 되어있으며
사용자가 다른 날짜 선택을 통해 다른 범위로 변경할 수 있다.

타입 매칭

출처
타입 참고
색상 커스텀