react-big-calendar 사용하기

react-big-calendar

React용으로 제작되고 최신 브라우저(read: IE10+)용으로 제작된 이벤트 일정관리 컴포넌트이며 flexbox를 사용합니다. 

Full Calendar의 영감을 받아 개발했습니다.

 

설치

yarn add react-big-calendar or npm install --save react-big-calendar

 

사용 - 언어(한국)

moment를 인자로 받는 momentLocalizer를 생성하고 <Calendar>컴포넌트의 localizer속성에 생성한 momentLocalizer를 적용합니다.

moment.locale의 국가 코드는 여기에서 확인 할 수 있습니다.

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const MyCalendar = () => {
    moment.locale('ko-KR');
    const localizer = momentLocalizer(moment);

    return (
        <Calendar
          localizer={localizer}
          events={myEventsList}
          style={{ height: 500 }}
        />
    )
}

 

사용 - 해더 부분 커스텀

해더 부분을 수정하기 위해서는 components속성을 사용해야 합니다. 해더부분을 수정하기 위해선 헤더에 해당하는(Toolbar라고함) 컴포넌트를 생성하고 해당 컴포넌트를 components속성의 toolbar 자식 속성에 적용하면 됩니다.

// [Toolbar.js]
export default function Toolbar(props) {
  const {
    date,
  } = props;

  const navigate = (action) => {
    props.onNavigate(action);
  };

  return (
    <div className="rbc-toolbar">
      <span className="rbc-btn-group">
        <button type="button" onClick={navigate.bind(null, 'TODAY')}>
          이번달
        </button>
        <button
          type="button"
          onClick={navigate.bind(null, 'PREV')}
        >
          이전
        </button>
        <span className="rbc-toolbar-label">{`${date.getFullYear()}년 ${date.getMonth() + 1}월`}</span>
        <button
          type="button"
          onClick={navigate.bind(null, 'NEXT')}
        >
          다음
        </button>
      </span>
    </div>
  );
}

// [MyCalendar.js]
const MyCalendar = () => {
    moment.locale('ko-KR');
    const localizer = momentLocalizer(moment);

    return (
        <Calendar
          localizer={localizer}
          events={myEventsList}
          style={{ height: 500 }}
          components={{
            toolbar: Toolbar,
          }}
        />
    )
}

 

사용 - 스타일 커스텀

react-big-calendar를 사용할때 필수 적으로 react-big-calendar/lib/css/react-big-calendar.css를 import해야만 합니다. 만약 import하지 않을 경우 style이 적용되지 않아 Text만 출력되는 현상을 격게 될 것입니다.

import 'react-big-calendar/lib/css/react-big-calendar.css';

해당 파일을 열어서 안의 내용을 복사한 후 복사된 style을 갖는 새로운 css를 생성한다. 위 css말고 새로 생성한 css를 import하고 해당 css를 커스텀 하면 됩니다.

 

사용 - 날짜영역 커스텀

css파일을 수정하여 커스텀을 진행하면서 생각나실 만한 부분인데 예를 들면 날짜영역을 클릭할때 class를 추가하거나, 또는 서버에서 데이터를 받아와서 해당 데이터가 가르키는 특정 일자나 특정 요일에 클래스를 추가하거나 아니면 어떤 인터렉션을 어떻게 주어야 할지 고민이 되시리라 생각이 듭니다.

 

react-big-calendar에서 제공해주는 문서를 보면 dayPropGetter를 사용해서 특정 조건에 대해서 날짜영역에 클래스를 추가하거나 클래스를 변경하는 것을 확인할 수 있습니다. dayPropGetter는 아래와 같이 날짜영역의 rbc-row-bg영역을 수정 할 수 있습니다. 

만약 rbc-row-bg가 아닌 rbc-row-content영역을 커스텀 해야 할 경우 어떻게 해야 할까요? 아래와 같이 rbc-row-content는 날짜 영역안의 내용을 의미합니다.

해당 영역을 커스텀 하려면 dayPropGetter로는 커스텀 할 방법이 없어 보였습니다. 그래서 확인해 보니 이 부분을 수정하려면 Toolbar를 생성하듯이 아래처럼 캘린더의 component에 컴포넌트를 추가 하면 됩니다.

 <Calendar
 components={{
   toolbar: Toolbar,
   month: {
     dateHeader: CustomDateHeader,
   },
 }}
/>

 

 

 

 

 

계속 업데이트 중이며 잘못된 부분이나, 궁금하신게 있으시면 댓글을 남겨주시면 추가적으로 수정 및 정리를 하도록 하겠습니다.