[React] fullcalendar 리액트 캘린더 구현 ~ next.js

 

 

💡 fullcalendar 사용 방법

 

yarn add

npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

 

우선 처음엔 이렇게 받고 더 필요한 건 나중에 설치!

 

@fullcalendar/react : React 컴포넌트 제공

@fullcalendar/core : calendar class 제공

@fullcalendar/interaction : dateClick 등 액션 감지하는데 필요

@fullcalendar/daygrid : 월별 및 daygrid 뷰 제공

 

calendar/page.tsx

'use client';

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list';

const CalendarPage = () => {
  const events = [
    {
      title: '아침 먹기',
      start: '2024-03-17',
      end: '2024-03-17',
      color: '#fb8494',
    },
    {
      title: '점심 먹기',
      start: '2024-03-19',
      end: '2024-03-20',
      color: '#fb8494',
    },
    {
      title: '저녁 먹기',
      start: '2024-03-23',
      end: '2024-03-30',
      color: '#fb8494',
    },
  ];

  return (
    <>
      <FullCalendar
        initialView="dayGridMonth"
        plugins={[dayGridPlugin]}
        events={events}
      />
      <FullCalendar
        plugins={[listPlugin]}
        initialView="listWeek"
        events={events}
      />
    </>
  );
};

export default CalendarPage;

😲 저 FullCalendar 에 옵션을 넣어서 활용한다!

 

dayGridMonth

listWeek

😦 클라리언트 컴포넌트에서 사용하기..

 

성공 전에 떴던 에러.. 살펴보니 클라이언트 컴포넌트에서만

동작한다는 이야기어서 파일 상단에 'use client' 를 추가해줬다! 🥹

 

 

 

🔗 https://dhdl-it.tistory.com/64

5. [React] React로 FullCalendar 사용2 - 주말 색상 변경

🔗 https://velog.io/@youjunho613/FullCalendar-library

[React] FullCalendar library

🔗 https://jiyumi00.tistory.com/52

[React -3] FullCalendar 라이브러리로 캘린더 구현

🔗 https://medium.com/@iamkjw/fullcalendar-with-react-2e22ce4e36ea

FullCalendar with React

🔗 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

달력 라이브러리 FullCalendar를 사용해보자