Calendar 컴포넌트_ import 'react-big-calendar'

 

🔖패키지 설치

 

(date-fns와 moment 중 하나 골라서 사용하면 됨)

 

*** date-fns 사용 ***

# 1. react-big-calendar 라이브러리 본체
npm install react-big-calendar

# 2-1. 날짜 처리를 위한 date-fns 및 지역화 도우미
npm install date-fns

 

*** moment 사용 ***

# 1. react-big-calendar 라이브러리 본체
npm install react-big-calendar

# 2. 날짜 처리를 위한 moment.js
npm install moment

 

예시)

import React from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'moment/locale/ko'; // 캘린더에 한국어 지역화 적용을 위해 moment 한국어 로케일 임포트
import 'react-big-calendar/lib/css/react-big-calendar.css';

// moment의 로케일을 한국어로 설정합니다.
moment.locale('ko');

// -------------------
// 1. Localizer 생성 (Moment 기반)
// -------------------
const localizer = momentLocalizer(moment);

// -------------------
// 2. 이벤트 데이터 (예시)
// -------------------
const myEvents = [
  {
    title: '모멘트 로컬라이저 테스트',
    start: new Date(2025, 10, 22, 14, 0), // 2025년 11월 22일 14:00
    end: new Date(2025, 10, 22, 16, 0),
  },
];


function MyCalendarWithMoment() {
  return (
    <div style={{ height: 500 }}>
      <Calendar
        // 필수: momentLocalizer 적용
        localizer={localizer} 
        
        // 이벤트 데이터 전달
        events={myEvents}
        
        // 뷰 설정
        views={['month', 'week', 'day', 'agenda']}
        defaultView="month"
        
        // 한국어 문화 코드를 명시적으로 지정 (optional)
        culture="ko" 
        
        style={{ height: '100%' }}
      />
    </div>
  );
}

export default MyCalendarWithMoment;

 

 

** 옵션

✅ 1. 기본 표시 관련
date={currentDate} // 현재 달력에 표시할 날짜(기준일)
view="month" // 현재 표시할 뷰 유형
views={['month', 'week', 'day', 'agenda']} // 사용 가능한 뷰 목록
defaultView="month" // 처음 기본 표시 뷰
localizer={momentLocalizer(moment)} // moment, date-fns 등 날짜 포맷 라이브러리를 연결

✅ 2. 날짜 이동 / 뷰 변경
onNavigate={(newDate, view, action) => {...}} // 날짜 이동 시 호출
onView={(newView) => {...}} // 뷰 변경 시 호출
min={new Date(2025,0,1,9,0)} // 하루 시작 시간
max={new Date(2025,0,1,18,0)} // 하루 종료 시간

✅ 3. 이벤트 관련
events={[{ title: 'Meeting', start: new Date(), end: new Date() }]} // 이벤트 목록
startAccessor="start" // 이벤트 시작 날짜 key
endAccessor="end" // 이벤트 끝 날짜 key
titleAccessor={(event) => event.name} // 이벤트 타이틀 가져오기
eventPropGetter={(event) => ({ style: { backgroundColor: 'red' } })} // 이벤트 스타일

✅ 4. 상호작용(Interaction)
selectable                               // 날짜/셀 선택 가능
onSelectEvent={(event) => {...}}         // 이벤트 클릭 시 호출
onSelectSlot={(slotInfo) => {...}}       // 빈 날짜 선택 시 호출
resizable                                // 이벤트 길이 드래그로 변경 가능
onEventDrop={(data) => {...}}            // 이벤트 드래그 시
onEventResize={(data) => {...}}          // 이벤트 리사이즈 시

✅ 5. 렌더링 커스터마이징
components={{
    event: MyEvent,
    toolbar: MyToolbar,
    month: {
        dateHeader: MyDateHeader,
        header: MyMonthHeader,
        event: MyMonthEvent,
    },
}}

✅ 6. 스타일 / 클래스
className="my-calendar"  // 전체 Calendar에 class 적용
formats={{                // 날짜 형식 커스텀
    dayHeaderFormat: (date, culture, localizer) => localizer.format(date, 'MM/DD')
}}

✅ 7. 언어 / 메시지
culture="ko"  // 언어 설정
messages={{    // UI 텍스트 변경
    next: '다음',
    previous: '이전',
    today: '오늘',
}}

✅ 8. 기타
popup                 // Month view에서 +more 이벤트 팝업
popupOffset={30}      // 팝업 위치 조정