React-Calendar

1. 설치

타입스크립트 기반이므로 @types 설치할 필요는 없다.

npm i react-calendar

2. 사용

• import

  import Calendar from "react-calendar";
  

• 타입 지정

  type ValuePiece = Date | null;
  type Value = ValuePiece | [ValuePiece, ValuePiece];
  

• state 설정

  const [date, setDate] = useState<Value>(new Date());
  

• 컴포넌트 사용

  <div className="calendar">
    <Calendar
      onChange={setDate}
      value={date}
      locale="ko-KR"
      calendarType="gregory"
      prev2Label={null}
      next2Label={null}
      minDate={new Date()}
      showDoubleView={true}
      selectRange={tripType === "round"}
  		formatDay={(locale, date) =>
        date.toLocaleString("en", { day: "numeric" })
      }
    />
  </div>
  

  • locale : 한국 달력으로 설정
  • calendarType : locale을 ko-KR로 설정하면 기본으로 월화수목금토일 ⇒ 일월화수목금토로 변경
  • showDoubleView : 두 달씩 볼 수 있게 설정
  • prev2Label, next2Label : <<, >> 버튼을 이용해 ‘연’ 단위로 이동, null로 방지
  • selectRange : true로 설정하면 value를 배열 형태로 저장
  • formatDay : locale을 ko-KR로 설정하면 “1일” 형태 ⇒ **“1”**로 변경

정진욱 할 일 !@#!@#!#!

• 초기 데이터 세팅시 유저 생년월일 1995-01-01 → 19950101 변경해 !@#!@#!@#!
• 유저 phone 01012345678 → 010-1234-5678