[사람별_Day8] RBC 쪼개기 1 - CustomToolbar : 날짜 이동

시작 요일, 월간만 보여주기

 

월요일부터 시작

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 1 }), // 월요일 시작
  getDay,
  locales,
});

 

 

월간만 보여주기

   <Calendar
        localizer={localizer}
        events={events} // 여기에 이벤트 추가 가능
        startAccessor='start'
        endAccessor='end'
        defaultView='month' // 기본 보여주기 : 월별
        views={['month']} // 월간 달력만 보여주기
        style={{ height: 500 }}
      />

 

 

 

RBC 주요 컴포넌트

 

좌측 상단에 날짜 넘기기 / 오늘 날짜 버튼을 두어 달력의 이동을 구현하고 싶었다.

사례를 찾다보니 RBC의 요소들을 여러 컴포넌트로 쪼개서 사용할 수 있다는 것을 알게되었다.

 

쪼갤 수 있는 주요 컴포넌트는 다음과 같다.

components={{
  toolbar,           // 상단 툴바
  event,             // 이벤트 셀
  agenda: {
    event,           // agenda view의 이벤트
  },
  timeSlotWrapper,   // 시간 슬롯 (시간 칸)
  dateCellWrapper,   // 날짜 셀 (월간 뷰 셀)
  day,               // 일간 뷰
  week,              // 주간 뷰
  month,             // 월간 뷰
}}

 

 

Toolbar의 props

그 중 툴바에 해당하는 요소를 자세히 살펴보겠다.

label, onNavigate, localizer, onView, date, view, views

 

label

 

• 툴바 중앙에 보통 보이는 현재 날짜 범위의 텍스트 (예: "April 2025")
• RBC 내부에서 자동으로 만들어줌

<span>{label}</span>  // "April 2025"

 

 

 

onNavigate(action)

• 이전/다음/오늘 버튼 클릭 시 사용하는 함수
• action 값은 다음 중 하나: 'PREV', 'NEXT', 'TODAY', 'DATE'

 

<button onClick={() => onNavigate('TODAY')}>Today</button>
<button onClick={() => onNavigate('PREV')}>{'<'}</button>
<button onClick={() => onNavigate('NEXT')}>{'>'}</button>

 

 

localizer

• 달력에서 사용하는 날짜/시간 관련 기능들을 지역(locale)에 맞게 처리
• 날짜를 "2025년 4월 7일"처럼 포맷
• 요일을 "Mon", "Tue"가 아니라 "월", "화"처럼 변경
• 주의 시작 요일을 월요일로 설정

 

onView(viewName)

• 뷰(예: month, week, day, agenda)를 전환하고 싶을 때 사용하는 함수
• views props에 해당 뷰가 등록되어있어야 작동한다.

<button onClick={() => onView('month')}>Month</button>
<button onClick={() => onView('week')}>Week</button>

 

 

date

 

• 현재 보여지고 있는 캘린더 날짜 기준의 Date 객체 (예: 2025-04-01)
• 직접 날짜 조작하고 싶을 때 유용

 

 

view

• 현재 보고 있는 뷰의 이름 ('month', 'week', 'day', 'agenda')

if (view === 'month') {
  // 월간 뷰 전용 UI 보여주기
}

 

 

views

 

• 사용 가능한 뷰들의 배열 (예: ['month', 'week', 'day'])
• 이걸로 view 전환 버튼을 동적으로 생성할 수 있다.

 

 

이전, 다음 달 넘기기

onNavigate()와 date를 사용한다.

 

공식 문서에서는 onNavigate와 date를 다음과 같이 설명하고 있다.

둘은 함께 사용되며 onNavigate 함수를 통해 date를 제어하는 것이다.

 

동적으로 변하는 날짜를 state로 두고 onNavigate 함수로 이를 제어했다.

// MainCalendar.tsx

const MainCalendar = () => {
  const [month, setMonth] = useState(new Date());
  
  return (
    <div>
   	 <Calendar
        localizer={localizer}
        events={events}
        date={month} // 현재 날짜(달)
        onNavigate={(newDate) => {
          setMonth(newDate); // 날짜(달) 변동
        }}
        startAccessor='start'
        endAccessor='end'
        defaultView='month'
        views={['month']}
        components={{
          toolbar: CustomToolbar, // 상단 툴바 분리
        }}
        style={{ height: 500 }}
      />
    </div>
  );
};

// CustomToolbar.tsx

import React from 'react';
import { NavigateAction } from 'react-big-calendar';

interface Props {
  label: string;
  onNavigate: (action: NavigateAction) => void;
}

const CustomToolbar = ({ label, onNavigate }: Props) => {
  return (
    <div>
      <button onClick={() => onNavigate('PREV')}>⬅️</button>
      <span>{label}</span>
      <button onClick={() => onNavigate('NEXT')}>➡️</button>
      <button onClick={() => onNavigate('TODAY')}>Today</button>
    </div>
  );
};

export default CustomToolbar;

 

 

🤔 버튼은 CustomToolbar 안에 있는데 외부에 date랑 onNavigate를 두어도 작동되는 이유가 뭘까?

 

캘린더 컴포넌트가 툴바에게 props를 넘겨주기 때문에 둘이 연결될 수 있는 것이다.

 

좀 더 자세히 살펴보자면,

<Calendar
  date={month}                          // 👉🏻 현재 날짜 state
  onNavigate={(newDate) => setMonth(newDate)} // 👉🏻 날짜 변경 함수
  components={{ toolbar: CustomToolbar }}      // 👉🏻 커스텀 툴바 적용
/>

 

 

1. 사용자가 버튼을 클릭한다.
2. CustomToolbar에서 onNavigate('PREV')
3. RBC 자체적으로 PREV에 맞는 newDate 계산
4. Calendar의 onNavigate(newDate) 호출
5. Calendar의 setMonth(newDate) → state 업데이트
6. Calendar 다시 렌더링 + CustomToolbar도 리렌더링

 

 

localizer 설정 : 2025 4월

사실 최상단에 정리한 것처럼 툴바가 아닌 캘린더에서 월요일 시작을 구현했다.

따라서 캘린더에서와 툴바에서의 localizer 역할 차이도 궁금했다.

 

 

📍캘린더에서의 localizer

전체 캘린더의 날짜 처리 기준을 정한다.

<Calendar localizer={localizer} ... />

 

• 기본 날짜 포맷팅, 시작 요일, 언어/로케일, 날짜 계산 로직 등을 Calendar에 전달
• 내부적으로 localizer.format(...), localizer.startOfWeek(...) 등을 사용해서 날짜 처리
• 시작 요일을 월요일: startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 1 })

 

 

📍툴바에서의 localizer

툴바에 표시되는 날짜 텍스트 포맷한다.

const CustomToolbar = ({ localizer }: ToolbarProps<Event>) => {
  const label = localizer.format(date, 'yyyy MMMM', 'ko-KR');
};

 

• Calendar에서 넘겨준 localizer 객체가 툴바에도 전달
• 툴바는 보통 현재 날짜에 맞는 문자열(label) 을 표시하기 때문에,
  localizer.format(...) 을 직접 호출해서 사용자가 보기 쉬운 텍스트를 만든다.
• "2025년 4월" 한글로 표시하고 싶을 때 : 직접 format을 호출해서 처리

 

 

 

지금 필요한 건 날짜를 "2025년 4월"처럼 포맷 하는 기능이다.

• localizer.format(date, formatString, culture)을 사용하여 원하는 형태로 날짜 출력 가능하다.

 

하지만,

캘린더에 const localizer = dateFnsLocalizer() 명시도 하고, 툴바에도 맞게 적용했지만 계속해서 'message' 오류가 발생했다.

원인은  dateFnsLocalizer()로 생성한 localizer와 Calendar의 generic 타입이 서로 안 맞아서 생기는 문제이다.

사실 그 내용을 아주 자세히 파악하지 못했지만 대략 다음과 같이 이해했다.

캘린더에서는 id가 포함된 supabase 데이터를 사용하기 때문에 CalendarEventType(id 포함) 타입을 사용하지만,
툴바에는 id를 사용하지 않는다. 따라서 둘의 타입이 맞지 않아서 생기는 문제

 

 

 

따라서 문제를 다음과 같이 해결하였다.

• 툴바의 타입을 캘린더와 같게 명시해주기 => 캘린더의 components > toolbar 에서 타입 오류 사라짐
• date-fns에서 한글 날짜값 가져오기

import { CalendarEventType } from '@/types/plans';
import { format } from 'date-fns';
import { ko } from 'date-fns/locale';
import { ToolbarProps } from 'react-big-calendar';

//⭐️캘린더와 타입 맞춤(id 유실로 인한 오류)⭐️ 
const CustomToolbar = ({ date, onNavigate }: ToolbarProps<CalendarEventType>) => {
  const customLabel = format(date, 'yyyy MMMM', { locale: ko });
  return (
    <div>
      <button onClick={() => onNavigate('PREV')}>⬅️</button>
      <span>{customLabel}</span>
      <button onClick={() => onNavigate('NEXT')}>➡️</button>
      <button onClick={() => onNavigate('TODAY')}>Today</button>
    </div>
  );
};

export default CustomToolbar;

 

어차피 커스터마이징 하는 것이기 때문에 꼭 localizer에 얽메이지 않고 date-fns에서 한글로 맞게 번역하는 방법을 택했다.