[React] 리액트 캘린더 사용하기

✅ react-calender

https://projects.wojtekmaj.pl/react-calendar/
리액트에서 캘린더 구현을 쉽게 하기 위한 라이브러리

✔ 설치

yarn add react-calender

✔ import

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

const calender = (props)=>{
	const [value, onChange] = useState(new Date());
  	const {meetings, leader, dates} = props;
  ...
  
	return (
      <>
      ...
      <Calendar
            className="group-calender"
            onChange={onChange}
            value={value} //현재 선택된 날짜
            formatDay={(locale, date) => moment(date).format("DD")}
            tileContent={({ date, view }) => { 
        		let html = [];
        		if (dates.find((x) => x === moment(date).format("YYYY-MM-DD"))) {
         		 html.push(<div className="dot"></div>); }
                    return (
                      <>{html}</>
                    );
      }}>
        ...
    </>
    )
}

기본 사용 모양이다.
현재 나는 meetings에 저장되어 있는 날짜에 마크를 표시하도록 설정해놓았다.

❌ 에러 상황

1. date 데이터 만들기

캘린더 안에서 날짜를 비교하려면 일정이 있는 날짜만 담긴 리스트가 필요했다.
그래서 나는 필터를 사용해서 일정이 1개 이상인 데이터의 date만 담아 리스트를 만들었다.
그런데 console에는 날짜 데이터가 잘 뜨는데 화면에 마크가 표시 되지 않았다.

그 이유는 아래와 같이 데이터의 배열이 중첩되어 있었다.

setDates([updatedDates])

console.log로 확인해봤을 때는 [''날짜'',''날짜'']로 제대로 출력되고 있어서 전혀 생각하지 못하고 30분동안 헤맸다..

아래와 같이 수정하니 잘 작동함

2. 시간 포맷 맞추기

react-calender 라이브러리와는 상관없는 에러
현재 백엔드는 django에서 timefield를 사용하여 일정 시간을 보내주고 있다.

django timefield를 사용할때는 다음과 같은 형식으로 moment.js 를 사용해야한다.

그렇지 않으면 다음과 같은 결과가 나타난다.