230810 React에서 FullCalendar 기본 사용법

230810 React에서 FullCalendar 기본 사용법

fullcalendar 라이브러리를 react에서 조작하는 방법.

 

API 사용법

FullCalendar 컴포넌트를 ref로 참조하여 getApi()를 호출하여 api를 사용할 수 있다

• next -> 다음 페이지로 이동
• prev -> 이전 페이지로 이동
• today -> 오늘로 이동
• gotoDate -> 해당 날짜로 이동

 const calendarRef = useRef<FullCalendar>(null);
 
 const goToNext = ():void => {
    if (!calendarRef.current) return;
    const api = calendarRef.current.getApi();
    api.next();
  };
 
 return(
    <>
    <button onClick={() => goToNext()}>다음 페이지로 이동</button>
    <FullCalendar
        ref={calendarRef}
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
   />
   </>
 )

 

event 사용법

interactionPlugin을 plugins props에 추가해야 동작한다.

• dateClick -> 사용자가 날짜를 선택하면 호출되는 이벤트
• select -> 사용자가 날짜 범위를 선택하면 호출되는 이벤트 (selectable={true} 지정해야 이벤트가 작동)

import { useState, useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { DateClickArg } from '@fullcalendar/interaction';
import './App.css';
import { DateSelectArg, EventContentArg } from '@fullcalendar/core/index.js';

const events = [{ title: 'Meeting', start: new Date() }];

function renderEventContent(eventInfo: EventContentArg) {
  return (
    <>
      <b>{eventInfo.timeText}</b>
      <i>{eventInfo.event.title}</i>
    </>
  );
}

function App() {
  const calendarRef = useRef<FullCalendar>(null);
  const [inputDate, setInputDate] = useState('2023-09-01');
  const goToNext = () => {
    if (!calendarRef.current) return;
    const api = calendarRef.current.getApi();
    api.next();
  };

  const goToPrev = (): void => {
    if (!calendarRef.current) return;
    const api = calendarRef.current.getApi();
    api.prev();
  };

  const goToToday = (): void => {
    if (!calendarRef.current) return;
    const api = calendarRef.current.getApi();
    api.today();
  };

  const goToDate = (): void => {
    if (!calendarRef.current) return;
    const api = calendarRef.current.getApi();
    api.gotoDate(inputDate);
  };

  const dateClick = (info: DateClickArg): void => {
    alert('누른 날짜: ' + info.dateStr);
  };

  const select = (info: DateSelectArg): void => {
    alert('선택한 날짜: ' + info.startStr + ' to ' + info.endStr);
  };

  return (
    <>
      <div>
        <h1>Demo App</h1>
        <div>
          <div>
            <button onClick={() => goToPrev()}>이전 페이지로 이동</button>
            <button onClick={() => goToNext()}>다음 페이지로 이동</button>
          </div>
          <button onClick={() => goToToday()}>오늘 날짜로 이동</button>
          <div>
            <input
              type="date"
              value={inputDate}
              onChange={(e) => setInputDate(e.target.value)}
            />
            <button onClick={() => goToDate()}>선택한 날짜로 이동</button>
          </div>
        </div>
        <FullCalendar
          ref={calendarRef}
          plugins={[dayGridPlugin, interactionPlugin]}
          initialView="dayGridMonth"
          selectable={true}
          weekends={false}
          events={events}
          eventContent={renderEventContent}
          dateClick={dateClick}
          select={select}
        />
      </div>
    </>
  );
}

export default App;