TIL | React 캘린더 (react-calendar 라이브러리 - TypeScript 적용 ...)

23.08.07

1. react-calendar로 React 캘린더 구현하기 - TypeScript 적용

투두리스트 개인 과제 카테고리 바 하단이 허전해서 캘린더를 구현해보기로 했다.
찾아보던 중 역시나 react npm에서 캘린더를 쉽게 구현할 수 있도록 도와주는 라이브러리가 여러개 있었는데 그 중에서 가장 많이 레퍼런스가 있어보이던 react-calendar로 구현하기로 결정했다.

1-1. react-calendar 설치

npm install react-calendar
yarn add react-calendar
위에 둘 중 하나로 라이브러리 설치하기

1-2. react-calendar 기본 코드

npm 공식 문서에서 가져온 기본 코드
(TypeScript가 적용되어 있음)

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

type ValuePiece = Date | null;

type Value = ValuePiece | [ValuePiece, ValuePiece];

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

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

아래는 내 프로젝트에 맞게 변형한 코드

import { useState } from "react";
import * as S from "./StyleTodoCalendar";

const TodoCalendar = () => {
  // useState 훅의 초기값으로 현재 날짜를 넣어줌
  const [today, setToday] = useState(new Date()); 

  // onChange 이벤트에 넣어줘서 날짜가 지날 때마다 today값이 업데이트 되도록 구현
  const onChangeToday = () => {
    setToday(today);
  };

  return (
    <S.CalendarBox>
      <S.StyleCalendar locale="en" onChange={onChangeToday} value={today} />
    </S.CalendarBox>
  );
};

export default TodoCalendar;

위 코드 처럼 기본적으로 현재값에 포커싱 되게끔

+) 추가로 locale 부분의 en을 없애면 한국어 달력으로 구현할 수 있음 !

1-3. react-calendar 커스텀 - styled-components

import "react-calendar/dist/Calendar.css";
이렇게 라이브러리에 있던 기존 css를 import해와서 적용하면 기본적으로 입혀지는 캘린더 css가 있다.

하지만 기본만 적용하니까 기존 투두리스트와 그다지 어울리지 않는 것 같아 간단하게 색이나 둥글기 부분들을 수정하려고 했다.

react-calendar 커스텀하려면 overriding 즉, 재정의 해야 한다 !!!!! 🔆

예를 들어 위 사진처럼 현재 날짜로 포커싱 되는 곳의 배경색을 바꾸고 싶다면 ? 해당 css 클래스를 찾아 그 부분을 지우거나 주석처리 하는 것이 아닌 다른 색 값을 넣어주는 즉, 재정의 해줘야만 적용이 가능한 것이다 !!!!!!! 🔆

import { styled } from "styled-components";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";

export const CalendarBox = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const StyleCalendar = styled(Calendar)`
  max-width: 100%;
  border: none;
  margin-bottom: 15px;
  padding: 20px;

  .react-calendar__navigation {
    display: flex;
    height: 24px;
    margin-bottom: 1em;
  }

  .react-calendar__navigation button {
    min-width: 24px;
    background-color: none;
  }

  .react-calendar__navigation button:disabled {
    background-color: #e8e8e8;
  }

  .react-calendar__navigation button:enabled:hover,
  .react-calendar__navigation button:enabled:focus {
    background-color: #e8e8e8;
  }

  .react-calendar__month-view__weekdays {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.15em;
  }

  .react-calendar__year-view .react-calendar__tile,
  .react-calendar__decade-view .react-calendar__tile,
  .react-calendar__century-view .react-calendar__tile {
    padding: 1.2em 0.5em;
  }

  .react-calendar__tile--hasActive {
    color: #ffffff;
    background-color: #797979;
    border-radius: 5px;
  }

  .react-calendar__tile--hasActive:enabled:hover,
  .react-calendar__tile--hasActive:enabled:focus {
    background-color: #797979;
  }

  .react-calendar__tile--active {
    color: #ffffff;
    background-color: #6a6a6a;
    border-radius: 7px;
  }

  .react-calendar__tile--active:enabled:hover,
  .react-calendar__tile--active:enabled:focus {
    background-color: #6a6a6a;
  }
`;

1-4. 레퍼런스

npm 공식 문서
참고 블로그

---

이번에는 라이브러리를 간단하게 사용해봤지만 이 캘린더와 투두리스트를 연결하여 사용해보는 것도 좋을 것 같다 !!!!!!