React-Big-Calendar 소개

• 모던 브라우저를 위해 설계된 리액트 기반 이벤트 캘린더
• <table><tr><td> 같은 테이블 캡션접근대신 flexBox기반으로 제작된 캘린더

어떤 이점이 있는가?

• props와 css를 사용해 자유도 높게 UI를 구현할 수 있도록 만들어져 커스텀스타일링이 용이함.
• Date와 관련한 여러 라이브러리를 지원(Day.js, moment, Globalize.js, 등등)

<aside> 💡

현재 React 19가 출시되었지만, 현재 React-big-Calendar는 React@v19를 지원하지 않고 있습니다.

</aside>

주된 사용법

• install

가장 기본적인 사용법

import Calendar from 'react-big-calendar';

const MyCalendar = (props)=> {
  return <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />

• 다양한 Props들을 통해 달력을 제어하거나 스타일을 event들에 스타일을주입할 수 있도록 해줌.
• props들은 문서 참고
• 중요한 props