[Front/React] FullCalender 라이브러리 커스터마이징

 

 

2차 프로젝트에서 달력을 만들어보고자 했다.

코치님께서는 직접 만들어보는 것도 좋은 경험이 될 것이라고 해주셨는데

프로젝트 기간이 정해져있다보니 시간이 얼마나 걸릴지 몰라서 우선은 라이브러리를 사용했다

직접 달력을 만들어보는 작업은 나중에...!

 

FullCalender 라이브러리를 사용해서 캘린더를 만들어보았다

 

 

< 주요 기능 >

• 이미지 넣기
• 주말에 색 넣기
• 날짜 포맷
• 이미지 클릭하면 값 변경
• 다른 달로 넘어갔다가 today 버튼을 누르면 오늘 날짜의 값으로 변경하기
• 비어있는 날짜 클릭해도 값 띄우기

 

 

 

1. FullCalender 라이브러리 설치

FullCalender 라이브러리 사용을 위해서는 npm으로 설치가 필요하다.

가장 많이 사용되는 react, daygrid만을 설치했다.

npm install --save @fullcalendar/react @fullcalendar/daygrid

 

 

2. FullCalender 라이브러리 사용

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

 

<FullCalendar
      defaultView="dayGridMonth" 
      plugins={[ dayGridPlugin, interactionPlugin ]}
      eventContent={renderEventContent}
      titleFormat={function(date) {
            return date.date.year +"년 "+(date.date.month +1)+"월" }}
      eventBackgroundColor='transparent'
      eventBorderColor='transparent'
      events={eventData}
      datesSet={(e) => handleDatesSet(e)}
      height="550px"
    />

 

• eventContent

캘린더 내 이벤트 내용에 들어갈 값을 넣어준다.

프로젝트에서는 이미지를 넣기 위해서 img 태그를 넣었다.

const renderEventContent = (eventInfo) => {
    return (
        <img className="check-image" src={check} alt="check"
        onClick={() => handleCheckClick(eventInfo.event)}
        width="40%"
        style={{ display: 'block', margin: '0 auto' }}
        />
    )
  }

 

• events

이벤트를 적용할 데이터들을 넣어준다.

const eventData = [
    {title: 'event 1', date: "2023-10-12"},
    {title: 'event 2', date: "2023-11-04"},
    {title: 'event 1', date: "2023-11-12"},
    {title: 'event 2', date: "2023-11-14"},
    {title: 'event 3', date: "2023-11-21"}
  ]

 

• dateClick

이미지가 없는, 비어있는 날짜를 클릭할 때는 값이 없다는 것을 보여주도록 구현했다.

이 부분을 위해서 interaction 모듈도 필요했다.

dateClick={(info) => {
        setHabitList(() => ({
          date: info.dateStr,
          habit1: "달성한 습관이 없습니다😭"
        }))
      }}

 

 

• datesSet

기본 설정으로는 '월' 전환 버튼을 클릭하면 이번 달 페이지로 넘어오는 것이 전부이다.

프로젝트에서는 '월' 전환 버튼을 누르면 오늘 날짜의 값을 가져올 수 있도록 구현했다.

 

datesSet으로 가져오는 값에는 해당 달력의 시작 날짜와 마지막 날짜가 startStr, endStr 값으로 들어있다.

렌더링된 달력의 달과 오늘 날짜의 달을 비교해서 일치한다면 오늘 날짜의 값을 가져오도록 했다.

const handleDatesSet = (e) => {
    const startDate = new Date(e.startStr);
    const endDate = new Date(e.endStr);
    const middleDate = new Date(startDate.getTime() 
                        + (endDate.getTime() - startDate.getTime()) / 2);
    const middleMonth = middleDate.getMonth() + 1;

    if (middleMonth === new Date().getMonth() + 1) {
        setHabitList(habitlist.habitlist)
    }
  };

 

 

• height

캘린더 길이 설정

 

 

 

 

참고자료

https://fullcalendar.io/docs/react

https://amadoo.tistory.com/89

https://velog.io/@bwj0509/%EB%8B%AC%EB%A0%A5-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-FullCalendar%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90