Full Calendar 라이브러리 사용하기

토이 프로젝트를 진행하면서 FullCalendar 라이브러리를 활용하여 일정을 관리하는 캘린더 페이지를 만들고 있습니다. FullCalendar를 사용하면서 배운 사용법과 코드를 예시로 들어 정리해보려고 합니다.

1. FullCalendar 라이브러리 및 종속성 가져오기

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable, DropArg } from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";

FullCalendar를 React 애플리케이션에서 사용하기 위해 필요한 라이브러리와 플러그인을 가져옵니다.

2. FullCalendar 컴포넌트 설정

<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]} // 플러그인 설정
  events={eventsArray} // 캘린더에 표시할 이벤트 데이터를 정의합니다.
  dateClick={handleDateClick} // 날짜를 클릭했을 때 실행할 콜백 함수를 정의합니다.
  eventClick={handleEventClick} // 이벤트를 클릭했을 때 실행할 콜백 함수를 정의합니다.
  editable={true} // 이벤트의 드래그 앤 드롭, 리사이징, 이동을 허용합니다.
  droppable={true} // 캘린더에 요소를 드롭하여 이벤트를 생성할 수 있도록 허용합니다.
  selectable={true} // 사용자가 일정 범위를 선택하여 이벤트를 추가할 수 있도록 허용합니다.
  selectMirror={true} // 이벤트를 추가할 때 선택한 영역을 표시합니다.
  nowIndicator={true} // 현재 시간을 표시하는 인디케이터를 활성화합니다.
  eventBackgroundColor="#ff0000" // 이벤트의 배경색을 설정합니다.
  eventBorderColor="#0000ff" // 이벤트의 테두리 색을 설정합니다.
  allDay={true} // 이벤트가 하루 종일인지 여부를 지정합니다.
  timeZone="UTC" // 캘린더의 시간대를 UTC로 설정합니다.
  headerToolbar={{
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,timeGridWeek",
  }}
/>

주요 플러그인

1. dayGridPlugin: 월간, 주간, 일간 그리드 레이아웃을 제공합니다.
2. timeGridPlugin: 시간별 그리드 레이아웃을 제공합니다.
3. listPlugin: 이벤트 목록을 나열하는 리스트 레이아웃을 제공합니다.
4. interactionPlugin: 사용자 상호작용을 지원하는 플러그인으로, 드래그 앤 드롭, 리사이징, 이벤트 선택 등의 기능을 제공합니다.
5. momentPlugin: 날짜 및 시간을 Moment.js와 함께 사용할 수 있도록 지원합니다.

💡 플러그인을 설정하여 FullCalendar를 원하는 기능으로 확장할 수 있습니다.

주요 속성

• headerToolbar: 캘린더의 툴바를 구성합니다.
  • left: 이전 달, 다음 달, 오늘 버튼이 왼쪽에 위치합니다.
  • center: 캘린더의 제목이 중앙에 위치합니다.
  • right: 월간 보기, 주간 보기 버튼이 오른쪽에 위치합니다.
• events: 캘린더에 표시할 이벤트 데이터를 정의합니다.
• dateClick: 날짜를 클릭했을 때 실행할 콜백 함수를 정의합니다.
• eventClick: 이벤트를 클릭했을 때 실행할 콜백 함수를 정의합니다.
• editable: 이벤트의 드래그 앤 드롭, 리사이징, 이동을 허용합니다.
• droppable: 캘린더에 요소를 드롭하여 이벤트를 생성할 수 있도록 허용합니다.
• selectable: 사용자가 일정 범위를 선택하여 이벤트를 추가할 수 있도록 허용합니다.
• selectMirror: 이벤트를 추가할 때 선택한 영역을 표시합니다.
• nowIndicator: 현재 시간을 표시하는 인디케이터를 활성화합니다.
• eventBackgroundColor: 이벤트의 배경색을 설정합니다.
• eventBorderColor: 이벤트의 테두리 색을 설정합니다.
• allDay: 이벤트가 하루 종일인지 여부를 지정합니다.
• timeZone: 캘린더의 시간대를 설정합니다.
  • 기본적으로 브라우저의 로컬 시간대를 따릅니다. 'allDay 속성'을 사용할 때에도 timeZone 속성에 주의해야 합니다. 이벤트가 하루 종일 이벤트이더라도, timeZone 속성이 설정되어 있다면 해당 시간대에 따라 표시됩니다.

💡 이런 속성들을 사용하여 FullCalendar를 customize 할 수 있습니다!

3. Event 데이터 속성

• 주요 속성

  • id: 각 event의 고유 식별자입니다.

  • title: event의 제목이나 설명을 나타냅니다.

  • start: event가 시작되는 날짜와 시간을 나타냅니다. 반드시 지정되어야 합니다!

  • end: event의 종료 날짜와 시간을 나타냅니다. 선택적으로 지정됩니다.

  • allDay: event가 하루 종일인지 여부를 나타냅니다. true로 설정하면 시간 정보를 무시하고 종일 이벤트로 처리됩니다.

    • 이벤트 데이터의 allDay 속성: 개별 이벤트가 하루 종일 이벤트인지 여부를 설정합니다.

    • 캘린더 컴포넌트의 allDay 속성: 캘린더에 표시되는 모든 이벤트를 일괄적으로 하루 종일 이벤트로 설정합니다.

• event 데이터는 이러한 속성들을 포함하는 JavaScript 객체의 배열로 구성됩니다.

  const events = [
    {
      id: 1,
      title: '방청소',
      start: '2024-03-10T09:00:00',
      end: '2024-03-10T12:00:00',
      allDay: false
      participant: 'Alice',
      content: '아파트 청소'
    },
    {
      id: 2,
      title: '저녁 약속',
      start: '2024-03-12T18:00:00',
      end: '2024-03-12T21:00:00',
      allDay: false
      participant: 'Dan',
      content: '기념일'
    },
  ];

• 위의 예시에서 participant와 content는 내장된 속성이 아닌 따로 추가한 확장된 속성입니다.

• FullCalendar에서 이렇게 확장된 속성을 사용하려면 이벤트를 정의할 때 해당 속성을 추가하고, 템플릿이나 이벤트 렌더링 함수에서 이러한 속성을 활용할 수 있습니다.

  📌 ! 확장된 속성 사용시 주의할 점 !

  • 고유한 이름: 확장된 속성의 이름은 내장된 속성과 겹치지 않도록 해야 합니다.
  • 일관된 처리: 확장된 속성을 적용할 때 캘린더에서 이를 올바르게 처리할 수 있어야 합니다.
  • API 호환성: 필요한 경우 API를 사용하여 이벤트를 필터링하거나 수정할 수 있어야 합니다.
  • 문서화: 코드를 이해하기 쉽게 주석이나 문서화를 통해 속성의 역할과 사용법을 설명해야 합니다.
    ⚠️ 실제로 event 내장 속성에 대해 잘 알지 못해 'startDate'을 확장 속성으로 정의하여 내장된 속성인 'start'와 혼동하며 사용하여 충돌이 나기도 했습니다.

💡 이러한 event 데이터를 이벤트 핸들링을 통해 FullCalendar에 전달하면 캘린더에 event가 표시되고 관리됩니다.

이번 프로젝트에서는 firebase를 사용하여 Firestore Database에 저장하고 가져오는 방식을 사용하려합니다.

4. 이벤트 핸들링:

사용자가 캘린더에서 날짜를 클릭하여 이벤트를 추가하고 수정하는 방법을 구현했습니다.

function handleDateClick(arg: { date: Date }) {
  const newEvent: ScheduleType = {
    userId: "",
    id: "",
    title: "",
    start: "",
    end: "",
    content: "",
    participant: "",
    backgroundColor: ""
  };
  setEvents((prevEvents) => [...prevEvents, newEvent]);
  setShowModal(true);
}

function handleEditModal(clickedEvent: any) {
  const event: ScheduleType = {
    userId: "",
    id: clickedEvent.event.id,
    title: clickedEvent.event.title,
    start: clickedEvent.event.start,
    end: clickedEvent.event.end,
    content: clickedEvent.event.extendedProps.content, 
    participant: clickedEvent.event.extendedProps.participant, 
    backgroundColor: clickedEvent.event.extendedProps.backgroundColor
  };
  setNewEvent(event); 
  setShowEditModal(true);
}

• handleDateClick: 사용자가 캘린더의 날짜를 클릭할 때 실행되며, 새 이벤트를 생성하고 모달을 표시합니다.
• handleEditModal: 사용자가 캘린더의 이벤트를 클릭할 때 실행되며, 해당 이벤트의 세부 정보를 편집 모달에 표시합니다.