React 에서 FullCalendar 사용하기

FullCalendar

FullCalenar 는 자바스크립트로 작성된 오픈 소스 캘린더 라이브러리 입니다.
해당 라이브러리는 다양한 기능과 여러 프레임워크를 지원하기 때문에 가장 인기가 많은 캘린더 오픈소스 라이브러리 입니다.

설치

yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid

컴포넌트 만들기

import { useState } from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

const CalendarTemplate = () => {
  const [events] = useState([
    { title: '이벤트 1', date: '2024-08-20' },
    { title: '이벤트 2', date: '2024-08-25' }
  ])

  return <FullCalendar plugins={[dayGridPlugin]} initialView="dayGridMonth" events={events} />
}

export default CalendarTemplate

이제 입맞에 맞춰 캘린더 컴포넌트를 만들어서 사용하면 됩니다.

완성 화면

캘린더 화면