[리액트] react-calendar로 캘린더 제작: 하이라이트 기능

- 결과

현재 제작하고 있는 건 다이어리 웹이다. 언제 일기를 작성했는지 보여준다.

위 사진은 2022년 1월 3, 7, 12, 13, 15일에 작성하였다고 보여주는 예시이다.

작성 날짜들을 표시할 수 있게 하이라이트 기능을 추가해보자! 😀

 

 

 

---

 

- 초기 설정

공식 깃헙 레파지토리를 참고하였다.

GitHub - wojtekmaj/react-calendar: Ultimate calendar for your React app.

 

- react-calendar 라이브러리 설치

// npm일 경우
npm install react-calendar

// yarn일 경우
yarn add react-calendar

 

설치가 완료되었다면, 코드를 작성해준다.

 

-코드 작성

import React, { useState } from 'react';
import Calendar from 'react-calendar';

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

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

 

 

그럼 다음과 같은 형태의 달력이 나타난다. (글씨체는 따로 설정한 겁니다!)

 

'2022년 1월'이라는 버튼을 클릭하면 월을 선택하게 바뀐다.

 

 

다음으로 예쁘게 커스텀해보겠다.

 

-css로 꾸미기

import 'react-calendar/dist/Calendar.css';

라이브러리에 있는 css 파일을 import 해오면, 

 

다음과 같이 예쁘게 바뀌는 것을 확인할 수 있다.

 

하지만! 나는 커스텀할게 꽤 있기 때문에

node_modules\react-calendar\dist\Calendar.css 경로에 있는 css 파일을 복붙하여 코드를 수정하였다.

 

커스텀할 게 없다면 이 단계는 생략해도 무관하다.

 

 

이제 기본 설정은 완료되었고, 본격적으로 하이라이트 기능을 추가해보겠다!!

 

- 하이라이트 기능 추가

 

코드 형태는 초기 설정에 작성한 코드와 유사하며 약간의 기능만 추가하면 된다.

 

- CSS 코드

.highlight {
  background: #f3a95f;
}

먼저 하이라이트가 되어야 하는 부분의 색을 정해줬다.

 

- 날짜 지정

const marks = [
    "15-01-2022",
    "03-01-2022",
    "07-01-2022",
    "12-01-2022",
    "13-01-2022",
    "15-01-2022",
  ];

하이라이트가 들어갈 날짜를 배열로 작성해주었다.

 

- 캘린더 설정

return (
    <div>
      <Calendar
        onChange={onChange}
        value={value}
        locale="en-EN"
        tileClassName={({ date, view }) => {
          if (marks.find((x) => x === moment(date).format("DD-MM-YYYY"))) {
            return "highlight";
          }
        }}
      />
    </div>
  );

집중해야 할 부분은 tileClassName이다.

tileClassName 상세 설명은 깃헙을 참고하면 된다.

date와 우리가 작성한 배열인 marks를 비교하며 해당되는 날짜에 highlight를 클래스명으로 주게 된다. 

 

 

이렇게 하면 moment가 undefined로 뜰 거다!!

moment를 설치하고 캘린더가 있는 소스코드에 import 해주면 해결된다.

 

- moment 설치

yarn add moment

 

- moment import

import moment from "moment";

 

 

[참고]

How to mark particular dates in react-calender

참고한 코드의 댓글을 보면, 더 좋은 성능을 낼 수 있는 코드가 적혀있다.