FullCalendar 라이브러리 사용하기

intro 프로젝트에 어떤 캘린더를 사용하면 좋을까 고민고민 하다가 FullCalendar를 사용해보기로 했다. 사용하는건 어렵지 않았다!!! 대신 커스텀은 조금 더 공부를 한 후에 적용해볼 생각이다.

 

공식 문서는 요기 ⬇

https://fullcalendar.io/

 

설치하기

 npm i --save @fullcalendar/react @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid

 

적용하기

import FullCalendar from "@fullcalendar/react";
import daygrid from "@fullcalendar/daygrid";
import timegrid from "@fullcalendar/timegrid";
import interaction from "@fullcalendar/interaction";

function Calendar() {
	return (
    	<FullCalendar
          plugins={[daygrid, timegrid, interaction]}
          initialView="dayGridMonth"
          headerToolbar={{
            start: "today prev,next", 
            center: "title",
            end: "dayGridMonth,timeGridWeek,timeGridDay",
          }}
        />
    );
 }

다운 받은 것들을 모두 import를 해주자! 그럼 다음 위 코드처럼 사용하면 된다.

 

# initialView

initialView는 이름에서도 유추할 수 있는 것처럼 캘린더의 기본 형식을 정할 수 있다. 

• dayGridMonth: 흔히 볼 수 있는 달력 형태이다.
• timeGridDay: 하루만 나오는 시간 테이블이다.
• timeGridWeek: 주간으로 나오는 시간 테이블이다.

# headerToolbar

headerToolbar는 달력 상단의 버튼을 어디에 배치할지, 사용할지를 정할 수 있다.

나의 경우에는 좌측에는 today, prev, next 버튼을 배치하였고, 중앙에는 현재 월, 우측에는 캘린더의 다른 형식을 볼 수 있는 버튼을 배치하였다.

 

크기 조정하기

.fc-media-screen {
  width: 100%;
}

.fc-scroller {
  height: auto !important;
  overflow: visible !important;
}

.fc-scrollgrid-sync-table tr:nth-last-child(1) {
  display: none;
}

.fc-scrollgrid-sync-table tr td {
  padding: 0 0.5rem;
}

크기는 개발자 도구에서 클래스 네임을 찾아서 설정해주었다. 

나의 경우에는 가로값과 거슬리는 스크롤바와 다음 달의 첫째 주가 함께 보이는 것을 없애는 것이 목표였기에 위와 같이 작성하였다.

 

급하게 한다고 커스텀을 하지 못한게 아쉬운데, 추후 커스텀한 블로깅도 올려보도록 하겠다!