[React] React_Calendar

react-calendar 라이브러리를 통해 Next 앱에 달력을 적용하는 방법을 기록합니다.

React-calendar 라이브러리

설치/기본 적용 방법

1.설치

npm i react-calendar

2.모듈을 import, css 적용

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css'; // css import

function MyApp() {
  const [value, onChange] = useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

커스텀 디자인

본 게시물에서는 styled-components 를 활용하고 있습니다.

전체적인 달력 크기 및 테두리 설정

달력 안 헤더 설정

요일 설정

날짜 타일 설정

선택 날짜 설정

기능 구현

본 게시물에서는 dayjs 를 사용하고 있습니다.

• nowDate를 통해 현재 날짜로 state를 저장하고, 모달창을 구현 하기 위해 isCalOpen를 등록해줬습니다.

• 그후 날짜가 선택 될 경우 handleDateChange를 통해 변환된 데이터를 저장해주고 현재 날짜를 format()으로 제가 원하는 날짜 형식으로 변경해 주었습니다.

• Calendar 컴포넌트에서 formatDay를 통해 일을 제거 해줬습니다.

결과