FullCalendar 라이브러리 more Popup 커스텀 하기 (antd)

캘린더 라이브러리로 FullCalendar 라이브러리를 사용하면서 이벤트들이 숨김 표시될 때 more 버튼이 생기는데

이 more 버튼을 클릭하면 전체 일정을 볼 수 있는 popup창이 뜬다.

기본으로 제공해주는 popup 컴포넌트 말고 새로 디자인 된 컴포넌트를 사용하기 위해 커스텀해야 할 일이 생겼다.

 

먼저 기본적으로 제공하는 것 이외에 필요한 것을 나열해보자면

1. 이벤트 타이틀만 표시되는 것이 아니라 start부터 end까지 표시되길 원함.

2. 그 이외의 추가적인 디자인

3. 이벤트 클릭 시에 작동은 동일해야 함.

 

처음에는 커스텀으로 만드는게 싫어서 기존에 있는걸 최대한 쓰려고 했지만 이벤트들이 묶여있어서

캘린더에서부터 날짜가 나오게 하는 방법 말고는 찾지 못했다.

그래서 아예 새로 만들기로 했다.

 

먼저 대략적인 디자인 변경은 기본적으로 제공하는 선택자를 찾아서 CSS를 변경하면 되지만

이벤트 타이틀 뿐만 아니라 저 날짜까지 표시되는게 코드를 좀 추가해야했다.

 

먼저 나는 시간이 안들어가기 때문에 defaultAllDay 옵션을 사용했다.

팝오버는 antd을 사용했다.

// popover에 관련된 코드 이외는 지웠다.
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

	<FullCalendar
          plugins={[dayGridPlugin]}
          initialView="dayGridMonth"
          timeZone="UTC"
          ref={calendarRef}
          defaultAllDay={true}
          dayMaxEventRows={true}
          height={1000}
          moreLinkClick={(e) => {
            setMoreEvents(e);
          }}
          moreLinkContent={(e) => (
            <MorePopOver
              e={e}
              moreEvents={moreEvents}
              showDetailModal={showDetailModal}
            />
          )}
          ……
        />

 

more 버튼을 클릭 시에 moreLinkClick 함수가 실행하여 안에 있는 이벤트들의 리스트를 받아올 수 있다.

그것을 state에 저장하고 가지고 있다가

MorePopOver 컴포넌트에 props로 전달해준다.

 

moreLinkContent는 more 버튼을 커스텀할 수 있다. MorePopOver의 코드를 보면

// antd의 Popover 컴포넌트를 사용한다.  
  import {  Popover} from 'antd';
    <Popover
      content={moreEvents && content}
      title={
        <div className="flex justify-between bg-customGray-light h-[35px] text-[20px] text-[#0C0E19] font-normal px-[8px]">
          {moreEvents.date && format(moreEvents.date, 'yyyy.MM.dd')}
          <CloseOutlined onClick={closePopOver} />
        </div>
      }
      trigger="click"
      className="custom"
      onOpenChange={handlePopOverChange}
      open={isPopOverOpen}
    >
      <span>{e.text}</span>
    </Popover>

 

그리고 마지막으로 기존 Pullcalendar의 popover는 visibility를 hidden 처리해준다.

.fc-more-popover {
  visibility: hidden;
}

 

완성된 캘린더 모습