TIL 23.08.28 리액트 달력 라이브러리 react-calendar

리액트 달력 라이브러리 React calender

 

개발자 깃허브 참고

https://github.com/wojtekmaj/react-calendar/blob/main/package/README.md

 

1. 라이브러리 설치

 

yarn add react-calendar

 

2. date 를 원하는 형식으로 지정해줄 라이브러리 설치 (moment 등 여러가지가 있으나 나는 date-fns 사용함)

 

yarn add date-fns

 

3. 다음과 같이 코드를 작성한다. 

 

나는 일일미션이 있는데, 이에 해당하는 날짜에 highlight 되어야 해서 marks 에 해당하는 날짜 로직을 집어넣는 식으로 함수를 작성하였다. 각자 필요사항에 따라 적용하면 될 듯.

 

<Calendar
        onChange={onChange}
        value={value}
        minDetail="month"
        maxDetail="month"
        showNeighboringMonth={false}
        locale="ko-KO" // 한국어 
        calendarType="US" // 요일을 일요일부터 시작하도록 설정
        className="mx-auto w-full text-sm border-b "
        formatDay={(locale, date) => format(date, "d")} // 일 제외하고 숫자만 보임
        tileClassName={({ date, view }) => { // 해당 marks 가 hightlight 효과가 나타남
          if (marks.find((item) => item === format(date, "yyyy-MM-dd"))) {
            return "highlight";
          }
        }}
      />

 

hightlight css

 

.highlight {
  color: rgb(255, 255, 255);

  background-color: #10c800 !important;
  border-radius: 30px;
}

 

결과