big-calendar 라이브러리 사용하기 01

 

오늘은 big-calnear 라이브러리에 대해 정리해보려고 한다.

 

최근 참여하고 있는 프로젝트에서 구글 캘린더와 같이 일정을 관리하는 기능을 구현해야하는 작업이 생겼다.

원래에는 캘린더를 직접 구현해보려고 시도 중이었다. 그러나 개발 일정과 작업량을 고려했을 때, 캘린더에 너무 많은 시간을 할애할 것 같다는 생각이 들었다. 그래서 좀 더 효율적으로 작업할 수 있는 방법을 찾아보기로 했다. 기존의 라이브러리를 활용하면 시간을 절약하면서도 필요한 기능을 효과적으로 구현할 수 있을 것이라고 생각했다.

 

 

:D 라이브러리 선정이유

 

아래 세가지 라이브러리 중에 react-big-calendar를 선택한 가장 큰 이유는 react-big-calendar가 fullcalendar에 비해 UI 커스터마이징의 자유도가 높아 보였기 때문이다. 또한, tuicalendar는 다양한 테마와 옵션을 제공하지만, 커스터마이징 시 특정 요소에 제한이 있을 수 있다고 생각했다. 

두 번째 이유는 react-big-calendar가 일정 관리의 핵심 기능에 중점을 두고 설계되어 있어 우리 프로젝트에 더 적합하다고 느꼈다. 필요한 최소한의 기능만을 제공함으로써 코드 수정에 대한 복잡성이 다른 라이브러리들에 비해 낮다고 판단했다.

 

 

:D big-calendar 라이브러리

 

먼저, 아래 명령어를 입력하여 라이브러리를 설치한다. (Note: Requires Node >= 18)

 

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

 

먼저, 로컬라이저를 생성해야한다. big-calendar라이브러리에서는 아래 코드와 같이 사용하는 날짜 포맷팅 라이브러리에 따라 로컬라이저 생성 함수를 정의하고 있다.

export function globalizeLocalizer(globalizeInstance: object): DateLocalizer;
export function momentLocalizer(momentInstance: object): DateLocalizer;
export function dateFnsLocalizer(config: object): DateLocalizer;
export function luxonLocalizer(
    luxonDateTime: object,
    options?: {
        /**
         * Luxon uses 1 based values for month and weekday
         * So we default to Sunday (7)
         * @default 7
         */
        firstDayOfWeek: number;
    },
): DateLocalizer;
export function dayjsLocalizer(dayjs: object): DateLocalizer;

 

문서에 정의된 예제는 moment.js를 사용하고 있다. 나는 기존 프로젝트 위에 추가해야하기 때문에 프로젝트에서 사용중인 date-fns를 기반으로 기능을 구현하려고 한다.

import { ko } from 'date-fns/locale';
import { format, getDay, parse, startOfWeek } from 'date-fns';

const locales = { ko };
const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales });

 

이제 컴포넌트를 만들어보자. 테스트용으로 아래와 같이 컴포넌트를 구성했다. 이 때, 잊지말고 스타일 코드를 적용해야한다. 

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

import { format, getDay, parse, startOfWeek } from 'date-fns';
import { ko } from 'date-fns/locale';
import { useMemo } from 'react';
import { Calendar, dateFnsLocalizer, View } from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';


/**
 * BigCalendar 기반의 커스텀 캘린더
 * @returns {JSX.Element} Calendar 컴포넌트
 */
export default function ManagementCalendar(): JSX.Element {
    const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales });

    const { defaultDate } = useMemo(() => {
        return { defaultDate: new Date() };
    }, []);

    return (
        <div style={{ height: '100vh' }}>
            <Calendar
                defaultDate={defaultDate}
                localizer={localizer}
                events={events}
                startAccessor='start'
                endAccessor='end'
                step={15}
                style={{ height: '100%' }}
                timeslots={4}
                views={views}
            />
        </div>
    );
}

• defaultDate : 캘린더가 렌더링 될 때 보여질 초기 날짜이다. 나는 오늘 날짜를 기준으로 설정했다.
• localizer : 날짜와 시간 포맷팅 및 로컬라이제이션을 처리하는 객체이다. (언어나 포맷 설정을 관리하는 용도이다)
• events : 캘린더에 표현할 이벤트 목록이다. 보통 아래와 같은 객체 형태로 생성한다.
  • 이벤트는 예제 코드를 날짜만 변경하여 사용했다. 
  • 예시. { id: 0, title: 'Board meeting', start: new Date(), end: new Date(), resourceId: 1 }
• startAccessor / endAccessor : 이벤트 객체의 시작 시간과 종료 시간에 대한 키 값이다.
  • 위 예시와 같이 이벤트 객체가 생성된 경우, start라는 이름으로 시작 시간을 찾고 end라는 이름으로 종료 시간을 찾는다.
• step : 캘린더의 시간 간격을 나타낸다. 
• timeslots : 타임 그리드 뷰에서 하나의 섹션에 표시될 슬롯의 수를 지정한다.
  • 예시. step=15이고 timeslots=4이면 한 시간 간격으로 4개의 슬롯이 15분 간격으로 나누어져 표현된다.
  • 예시. step=15이고 timeslots=2이면 30분 간격으로 2개의 슬롯이 15분 간격으로 나누어져 표현된다.
• views : 캘린더의 뷰 모드를 설정한다. (month / week / day등)

 

 

 

위와 같이 코드를 작성하면 아래와 같은 형태의 캘린더가 나타난다. 만약 화면에 캘린더 크기가 제대로 적용되지 않는다면 캘린더 컨테이너의 높이가 제대로 설정되었는지 확인해보자. 

 

 

결과 화면(월간 달력)

결과 화면(주간 달력)