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;
'내일배움캠프' 카테고리의 다른 글
230813 내일배움캠프 13주차 WIL (0) | 2023.08.13 |
---|---|
230812 ant design을 쓰면서 느낀 점 (0) | 2023.08.12 |
230809 React Zustand Modal 전역 상태 관리하기 (0) | 2023.08.09 |
230808 useViewport()로 미디어 쿼리 없이 반응형 만들기 (0) | 2023.08.08 |
230807 새로운 프로젝트 시작 (0) | 2023.08.07 |