[TIL] 내일배움캠프 React 과정 2023.02.18_FullCalendar

Today I Learned

• FullCalendar에 DB에서 불러온 이벤트 생성하기
• FullCalendar 커스텀 CSS 적용하기

 

---

FullCalendar에 이벤트 생성하기

firestore에서 불러 온 분양 정보의 청약 접수 종료일마다 이벤트를 생성해주고 싶었다.

 

var calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'The Title',
      start: '2018-09-01', 
      end: '2018-09-02'
    }
  ]
})

일단 공식문서를 살펴보니 event 속성의 요소가 정해져 있고 배열 안에 객체를 넣어주면 되는 거 같아서 기존 분양 정보 데이터를 이렇게 재가공하기로 했다.

 

const array = [];
homeList.map((item: any) =>
    array.push({
      title: item.HOUSE_NM,
      date: item.RCEPT_ENDDE,
      id: item.PBLANC_NO,
    }),
);

firestore에서 불러 온 homeList라는 데이터를 map을 돌리면서 FullCalendar의 이벤트 형식과 동일하게 재가공했다. id는 나중에 디테일 페이지로 이동할 때 param에 넣어주기 위해서 추가했다.

 

array를 콘솔로 찍어보면 이렇게 생겼다.

 

<FullCalendar
        plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
        headerToolbar={{
          left: 'prev',
          center: 'title',
          right: 'next',
        }}
        initialView="dayGridMonth"
        nowIndicator={true}
        selectable={true}
        locale={'ko'} // 한글 표기
        events={array}
        eventClick={((e) => router.push(`/detail/${e.event.id}`))}
      />

event 속성에 바로 기존 데이터를 재가공한 array를 넣어주면 캘린더에 날짜마다 이벤트를 생성해 줄 수 있다. 나는 추가적으로 해당 이벤트를 클릭했을 때 디테일 페이지로 이동하는 이벤트를 주고 싶어서 eventClick 속성을 추가했다.

 

 

 

FullCalendar 커스텀 CSS 적용하기

정말 오늘 하루종일 매달렸던 문제의 커스텀 CSS... 일단 보충 설명을 하자면 FullCalendar v6을 사용하고 있고 React, Next.js로 프로젝트를 생성했다.

 

수정 전 / 수정 후

나의 불만사항이 뭐였냐면 이벤트들이 너무 다닥다닥 붙어있는 게 싫어서 margin과 padding을 좀 주고 싶었다. 그런데 event 속성으로 스타일을 지정할 수 있는 건 배경색이나 폰트 색상 정도였고 디테일하게 조절할 수 있는 방법은 공식문서에서도 친절하게 설명해주지 않아서 방법을 찾기 힘들었다. v5로 다운그레이드하거나 node_moduls 폴더에서 타고 들어가서 FullCalendar CSS 파일을 직접 수정하는 등의 방법을 시도해 봤지만 모두 실패했었다.

 

is it possible Customise FullCalendar with css in react?

정말 하루종일 구글링하며 이것저것 시도한 끝에 stack overflow의 글을 하나 찾게 되는데.. 여기에 답이 있었다!

 

import FullCalendar from "@fullcalendar/react";
import styled from "@emotion/styled";

export const StyleWrapper = styled.div`
  .fc td {
    background: red;
  }
`

const MyApp = ()=> {
  return (
    <StyleWrapper>
      <FullCalendar/>
    </StyleWrapper>
  );
}

 

FullCalendar를 감싸는 스타일 컴포넌트를 하나 만들고 그 안에서 CSS 속성을 지정해주면 된다!! 

 

만약 이벤트 요소에 padding를 주고 싶다면 구글 개발자도구를 이용해서 해당 요소의 class 명을 먼저 알아낸다. 그리고 이 class 명을 이용해서 css를 적용하면 된다.

 

import FullCalendar from "@fullcalendar/react";
import styled from "@emotion/styled";

export const StyleWrapper = styled.div`
  width: 100vw;
  padding: 50px 80px;
  .fc-event{
    cursor: pointer;
    padding: 5px;
    margin-bottom: 2px;
  }
`;

const MyApp = ()=> {
  return (
    <StyleWrapper>
      <FullCalendar/>
    </StyleWrapper>
  );
}

나는 이벤트마다 padding과 margin-bottom 속성을 추가했다. 이렇게 쉬운 방법이 있었는데 하루종일 헤매서 속상하기도 하지만 앞으로 디테일한 커스텀 스타일링이 가능할 거 같아서 다행인 거 같다.

 

---

회고

진짜... 오늘 하루종일 fullcalendar랑 싸웠다. 그리고 그게 결과적으로는 의미있는 시간이었음!! 끝까지 포기하지 않는 나 자신을 칭찬해 줘야겠어ㅎㅎ