react-day-picker

이번 포스트에서는 달력을 만들고 일자 선택이 가능한 react-day-picker npm에 대해 알아본다.

 

import { useState } from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";

const Calendar = () => {
  const [day, setDay] = useState(new Date()); // 날짜 state
  const [schedule, setSchedule] = useState(
    `${new Date().toLocaleDateString()} 일정`
  );

  const modifiers = {
    toDay: new Date(),
    selectDay: day,
  };
  const modifiersStyles = {
    toDay: {
      color: "white",
      backgroundColor: "red",
    },
    selectDay: {
      border: "1.5px solid red",
      boxSizing: "border-box",
    },
  };

  // 날짜 클릭 이벤트
  const handleDayClick = (day: any) => {
    setDay(day);
    setSchedule(`${day.toLocaleDateString()} 일정`);
  };

  return (
    <div>
      <DayPicker
        onDayClick={handleDayClick}
        modifiers={modifiers}
        modifiersStyles={modifiersStyles}
      />
      <p>{schedule}</p>
    </div>
  );
};

export default Calendar;

 

1. day와 schedule에 해당하는 state를 선언한다.
2. modifiers를 통해 오늘 날짜(new Date())와 선택 날짜(day)를 설정한다.
3. modifiersStyles를 통해 오늘 날짜, 선택 날짜에 대한 css를 설정한다.
4. day와 schedule state를 변경하는 handleDayClick 함수를 생성한다.
5. import한 DayPicker를 return하고 그 안에 설정한 값과 함수를 매칭한다.

 

실행해보면 다음과 같이 달력이 생성되고 오늘 날짜와 선택 날짜가 표시되는 것을 볼 수 있다.

아래 텍스트에는 선택 날짜에 따른 schedule 값이 출력된다.