개요:
이전 포스팅에서 React 프로젝트에서 FullCalendar를 사용하는 기본 방법을 소개했습니다.
이번 포스팅에서는 FullCalendar가 제공하는 다양한 Props를 통해 더 많은 기능을 구현하는 방법을 알아보겠습니다.
목표:
FullCalendar의 다양한 Props를 활용하여 캘린더를 더욱 유연하고 강력하게 커스터마이징하는 방법을 학습합니다.
1. Props란?
Props(속성)는 React 컴포넌트에서 사용되는 매개변수(parameter)와 비슷한 개념입니다. Props는 React 컴포넌트에 데이터를 전달하거나 컴포넌트의 동작을 제어하는 데 사용됩니다. 각 Props는 컴포넌트의 속성을 나타내며, 이를 통해 컴포넌트 간의 데이터 흐름과 상호작용을 관리할 수 있습니다.
2. FullCalendar가 제공하는 Props 소개
1. 기본적인 Props
initialView : 캘린더가 처음 렌더링될 때 표시할 뷰를 설정합니다.
plugins : 사용할 플러그인을 설정합니다. (예: dayGridPlugin, timeGridPlugin 등)
events : 캘린더에 표시할 이벤트 데이터를 설정합니다.
locale : 캘린더의 언어 및 지역 설정을 지정합니다.
예시)
import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react'; // FullCalendar 컴포넌트 Import
import dayGridPlugin from '@fullcalendar/daygrid'; //플러그인 Import
import timeGridPlugin from '@fullcalendar/timegrid'; //플러그인 Import
function CalendarComponent() {
const [events, setEvents] = useState([
{ id: '1', title: 'Event 1', start: '2024-06-01', end: '2024-06-03' },
{ id: '2', title: 'Event 2', start: '2024-06-07', end: '2024-06-11' },
]);
return (
<FullCalendar
initialView="dayGridMonth" //초기 viewtype을 Month로 설정
plugins={[dayGridPlugin, timeGridPlugin]} //플러그인 설정
events={events} //events배열을 event로 사용
locale={'ko'} // 날짜를 한글로 표기
/>
);
}
export default CalendarComponent;2. 날짜 및 시간 관련 Props
initialDate: 캘린더가 처음 렌더링될 때 표시할 날짜를 설정합니다.
timeZone: 캘린더의 시간대를 설정합니다. (예: 'local', 'UTC'...)
firstDay: 주의 첫 번째 날을 설정합니다. (0: 일요일, 1: 월요일 등)
weekends: 주말 표시 여부를 설정합니다. (boolean)
예시)
import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react'; // FullCalendar 컴포넌트 Import
import dayGridPlugin from '@fullcalendar/daygrid'; // 플러그인 Import
import timeGridPlugin from '@fullcalendar/timegrid'; // 플러그인 Import
function CalendarComponent() {
const [events, setEvents] = useState([
{ id: '1', title: 'Event 1', start: '2024-06-01', end: '2024-06-03' },
{ id: '2', title: 'Event 2', start: '2024-06-07', end: '2024-06-11' },
]);
return (
<FullCalendar
initialView="dayGridMonth" // 초기 viewtype을 Month로 설정
plugins={[dayGridPlugin, timeGridPlugin]} // 플러그인 설정
events={events} // events 배열을 event로 사용
locale={'ko'} // 날짜를 한글로 표기
initialDate="2024-06-01" // 캘린더가 처음 렌더링될 때 표시할 날짜 설정
timeZone="Asia/Seoul" // 캘린더의 시간대를 아시아/서울로 설정
firstDay={1} // 주의 첫 번째 날을 월요일로 설정
weekends={true} // 주말을 표시하도록 설정
/>
);
}
export default CalendarComponent;- 더 알아보기 : timeZone Prop은 FullCalendar의 이벤트 및 표시 시간을 특정 시간대로 설정할 수 있게 해줍니다. 이 Prop을 사용하면 다른 시간대를 사용하는 사용자가 동일한 캘린더를 볼 때 각자의 시간대에 맞게 이벤트 시간이 자동으로 조정됩니다.
3. 캘린더 뷰 관련 Props
headerToolbar : 캘린더 상단의 툴바에 표시될 버튼과 컨트롤을 설정합니다.
footerToolbar : 캘린더 하단의 툴바에 표시될 버튼과 컨트롤을 설정합니다.
views : 특정 뷰에 대한 설정을 세부적으로 조정합니다. (예: 월 뷰, 주 뷰, 일 뷰의 별도 설정)
예시)
import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react'; // FullCalendar 컴포넌트 Import
import dayGridPlugin from '@fullcalendar/daygrid'; // 플러그인 Import
import timeGridPlugin from '@fullcalendar/timegrid'; // 플러그인 Import
function CalendarComponent() {
const [events, setEvents] = useState([
{ id: '1', title: 'Event 1', start: '2024-06-01', end: '2024-06-03' },
{ id: '2', title: 'Event 2', start: '2024-06-01', end: '2024-06-03' },
{ id: '3', title: 'Event 3', start: '2024-06-01', end: '2024-06-01' },
{ id: '4', title: 'Event 4', start: '2024-06-01', end: '2024-06-01' },
{ id: '5', title: 'Event 5', start: '2024-06-07', end: '2024-06-11' }
]);
return (
<FullCalendar
initialView="dayGridMonth" //초기 viewtype을 Month로 설정
plugins={[dayGridPlugin, timeGridPlugin]} //플러그인 설정
events={events} //events배열을 event로 사용
locale={'ko'} // 날짜를 한글로 표기
initialDate="2024-06-01" // 캘린더가 처음 렌더링될 때 표시할 날짜 설정
timeZone="Asia/Seoul" // 캘린더의 시간대를 아시아/서울로 설정
firstDay={1} // 주의 첫 번째 날을 월요일로 설정
weekends={true} // 주말을 표시하도록 설정
headerToolbar={{
start: "prev,next today", //상단툴바의 시작부분, 이동버튼, 오늘날짜버튼 배치
center: "title", //상단툴바의 제목 배치
end: "dayGridMonth dayGridWeek dayGridDay" //view변경 버튼 배치
}}
views={{ // 특정 뷰에 대한 설정을 세부적으로 조정
dayGridMonth: {
dayMaxEventRows: 3, // 하루에 최대 3개의 이벤트 행 표시 (초과되는 건 +more 로 표시됨)
buttonText: '월간' // 월간 뷰 버튼 텍스트 설정
},
dayGridWeek: {
buttonText: '주간' // 주간 뷰 버튼 텍스트 설정
},
dayGridDay: {
buttonText: '일간' // 일간 뷰 버튼 텍스트 설정
}
}}
/>
);
}
export default CalendarComponent;4. 이벤트 관련 Props
eventColor : 이벤트의 기본 색상을 설정합니다.
eventTextColor : 이벤트 텍스트의 색상을 설정합니다.
eventBackgroundColor : 이벤트 배경 색상을 설정합니다.
eventBorderColor : 이벤트 테두리 색상을 설정합니다.
eventClick : 이벤트 클릭 시 실행될 콜백 함수를 설정합니다.
eventMouseEnter : 이벤트에 마우스가 올려질 때 실행될 콜백 함수를 설정합니다.
eventMouseLeave : 이벤트에서 마우스가 벗어날 때 실행될 콜백 함수를 설정합니다.
예시)
import React, { useState } from 'react';
import FullCalendar from '@fullcalendar/react'; // FullCalendar 컴포넌트 Import
import dayGridPlugin from '@fullcalendar/daygrid'; // 플러그인 Import
import timeGridPlugin from '@fullcalendar/timegrid'; // 플러그인 Import
function CalendarComponent() {
const [events, setEvents] = useState([
{ id: '1', title: 'Event 1', start: '2024-06-01', end: '2024-06-03' },
{ id: '2', title: 'Event 2', start: '2024-06-01', end: '2024-06-03' },
{ id: '3', title: 'Event 3', start: '2024-06-01', end: '2024-06-01' },
{ id: '4', title: 'Event 4', start: '2024-06-01', end: '2024-06-01' },
{ id: '5', title: 'Event 5', start: '2024-06-07', end: '2024-06-11' }
]);
const handleEventClick = (info) => {
alert(`이벤트 제목: ${info.event.title}`);
};
return (
<FullCalendar
initialView="dayGridMonth" //초기 viewtype을 Month로 설정
plugins={[dayGridPlugin, timeGridPlugin]} //플러그인 설정
events={events} //events배열을 event로 사용
locale={'ko'} // 날짜를 한글로 표기
initialDate="2024-06-01" // 캘린더가 처음 렌더링될 때 표시할 날짜 설정
timeZone="Asia/Seoul" // 캘린더의 시간대를 아시아/서울로 설정
firstDay={1} // 주의 첫 번째 날을 월요일로 설정
weekends={true} // 주말을 표시하도록 설정
headerToolbar={{
start: "prev,next today", //상단툴바의 시작부분, 이동버튼, 오늘날짜버튼 배치
center: "title", //상단툴바의 제목 배치
end: "dayGridMonth dayGridWeek dayGridDay" //view변경 버튼 배치
}}
views={{ // 특정 뷰에 대한 설정을 세부적으로 조정
dayGridMonth: {
dayMaxEventRows: 3, // 하루에 최대 3개의 이벤트 행 표시 (초과되는 건 +more 로 표시됨)
buttonText: '월간' // 월간 뷰 버튼 텍스트 설정
},
dayGridWeek: {
buttonText: '주간' // 주간 뷰 버튼 텍스트 설정
},
dayGridDay: {
buttonText: '일간' // 일간 뷰 버튼 텍스트 설정
}
}}
eventColor="#76c3c5" // 이벤트 기본 색상 설정
eventTextColor="#089196" // 이벤트 텍스트 색상 설정
eventBackgroundColor="#76c3c577" // 이벤트 배경 색상 설정
eventBorderColor="#76c3c5" // 이벤트 테두리 색상 설정
eventClick={handleEventClick} // 이벤트 클릭 시 콜백 함수 설정
/>
);
}
export default CalendarComponent;- 더 알아보기 : info는 FullCalendar에서 이벤트가 발생할 때 제공하는 객체로, 이벤트에 대한 다양한 정보를 담고 있습니다. eventClick 콜백 함수의 info 객체는 클릭된 이벤트에 대한 세부 정보를 포함하고 있어, 이를 활용해 이벤트의 다양한 속성에 접근할 수 있습니다.
info 객체의 주요 속성
event: 클릭된 이벤트 객체. 이벤트의 속성(예: title, start, end 등)에 접근할 수 있습니다.
el: 클릭된 이벤트의 DOM 요소.
jsEvent: 실제로 발생한 JavaScript 이벤트 객체. 일반적인 마우스 이벤트 속성(예: clientX, clientY 등)에 접근할 수 있습니다.
view: 이벤트가 발생한 캘린더 뷰에 대한 정보.
5. 스타일 및 테마 관련 Props
themeSystem : 테마 시스템을 설정합니다. (예: 'standard', 'bootstrap')
height : 캘린더의 높이를 설정합니다.
contentHeight : 캘린더의 콘텐츠 높이를 설정합니다.
aspectRatio : 캘린더의 가로 세로 비율을 설정합니다.
6. 상호작용 관련 Props
selectable : 날짜 및 시간 범위를 선택할 수 있는지 여부를 설정합니다.
editable : 이벤트를 드래그 앤 드롭으로 편집할 수 있는지 여부를 설정합니다.
droppable : 외부 요소를 드롭하여 이벤트를 생성할 수 있는지 여부를 설정합니다.
eventResizableFromStart : 이벤트 시작 시간을 드래그하여 조정할 수 있는지 여부를 설정합니다.
7. 고급 설정 및 커스터마이징
customButtons : 사용자 정의 버튼을 설정하고 툴바에 추가합니다.
slotMinTime : 일 뷰 및 주 뷰에서 표시할 시간 범위의 최소값을 설정합니다.
slotMaxTime : 일 뷰 및 주 뷰에서 표시할 시간 범위의 최대값을 설정합니다.
slotDuration : 시간 슬롯의 간격을 설정합니다.
scrollTime : 일 뷰 및 주 뷰에서 처음 스크롤할 시간대를 설정합니다.
8. 그 외
이외에도 더욱 다양한 Props를 제공하고 있으니 공식문서를 참고해보세요!
.
.
.
결과 화면
3. 마치며
지금까지 React에서 Fullcalendar의 기본적인 Props에 대해 알아보았습니다.
FullCalendar에서 제공한 props를 잘 이용하면 이벤트의 타입을 나누고 색상을 다르게 한다던지, 이벤트 클릭 시 메모기능을 넣는 등 다양하게 활용할 수 있을 것 같습니다.
다음 포스팅에서는 data의 type에 따라 event의 색상을 다르게 적용하는 예제를 다루어 보겠습니다.
그럼
HAPPY CODING!
감사합니다 덕분에 큰 도움이 된 것 같아요 :)
최고!