React big Calendar 공식 문서에 있는 모든 APIs를 써보고 정리해보자!
React Big Calendar는 React와 최신 브라우저용으로 제작된 이벤트 일정관리 컴포넌트이다.
yarn add react-big-calendar
yarn add moment // localizer 설치style 사용하기 위해서 아래의 css 파일을 import하고 Calendar component의 height를 지정해야한다.
import "react-big-calendar/lib/css/react-big-calendar.css";
const MyCalendar = () => {
...
return (
<div>
<Calendar
...
style={{ height: 500 }}
/>
</div>
);
};
import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
const MyCalendar = () => {
moment.locale("ko-KR");
const localizer = momentLocalizer(moment);
return (
<div>
<Calendar
localizer={localizer}
startAccessor="start"
endAccessor="end"
style={{ height: 500 }}
/>
</div>
);
};
export default MyCalendar;국가 코드를 토대로 date format 을 설정한다.
...
// import momentLocalizer, moment
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
const MyCalendar = () => {
moment.locale("ko-KR"); // *국가 코드
const localizer = momentLocalizer(moment); // date format 지정
return (
<div>
<Calendar
...
localizer={localizer} // localizer 추가
/>
</div>
);
};
export default MyCalendar;사용법
-
moment를 인자로 받는 momentLocalizer를 생성한다.
-
Calendar 컴포넌트의 localizer 속성에 생성한 momentLocalizer를 적용한다.
보기 단위의 default를 설정한다.
defaultView 속성에는 agenda , day , month , week , work_week 값을 넣을 수 있다.
예 ) agenda
current 보기 단위를 설정한다.
view 값이 변할 때마다 실행되는 callback 함수이다.
일정을 보여주는 view의 name을 배열로 받는다.
views={['month', 'day', 'agenda']}default 날짜를 설정한다.
<Calendar
defaultDate={new Date(2022, 1, 10)} // 2022년 1월 10일
/>사용법
new Date() 함수를 이용하여 날짜를 설정한다.
current 날짜를 설정한다.
date 값이 변할 때마다 실행되는 callback 함수이다.
current date, time을 결정한다.
해당 날짜에 hightlight가 된다.
일정 객체를 담은 배열을 가진다.
일정 제목에 대한 Accessor이다.
startAccessor 는 일정이 시작하는 날짜에 대한 Accessor이다.
endAccessor 는 일정이 끝나는 날짜에 대한 Accessor이다.
일정이 하루 종일 지속되는 일정인지 결정하는 Accessor이다.
const MyEventList = [
{
allDay: true, // boolean
...
},
...
]
return (
<div>
<Calendar
allDayAccessor="allDay"
...
/>
</div>
);일정에 커서를 올리면 생기는 tooltip(도움말)에 대한 Accessor이다.
events 내 객체에 있는 key를 속성으로 가질 수 있다.
const MyEventList = [
{
title: "All Day Event very long title",
allDay: true,
start: new Date(2022, 1, 0),
end: new Date(2022, 1, 1),
},
...
]
return (
<div>
<Calendar
tooltipAccessor="title" // title, allDay, start, end 선택
...
/>
</div>
);일정을 특정한 resource로 map하는 resource objects 배열이다.
resource objects는 어떤 shape와 Properties를 가질 수 있으나,
“title” 또는 resourceTitleAccessor에 의해 제공받은 name과 같은resourceIdAccessor로 고유하게 식별되어야 한다.
resource의 id를 반환하는 Accessor이다.
resources 배열에서 각각의 resource에 대하여 고유 식별자를 제공한다.
각각의 resource에 대하여 human readable name을 제공한다.
이때 name은 header에 사용된다.
선택된 event이다.
event 가 선택(클릭)될 때 실행되는 callback 함수이다.
event가 더블클릭될 때 실행되는 callback 함수이다.
date을 drag할 수 있게 한다.
date를 drag했을 때 실행되는 callback 함수이다.
selectable이 true일 때만 실행된다.
<div>
<Calendar
selectable
onSelectSlot = { ( { start, end } ) => {
console.log( "Selected", start, end );
}}
/>
</div>
// expected result
Selected Tue Feb 08 2022 01:00:00 GMT+0900 (Korean Standard Time)
Tue Feb 08 2022 08:00:00 GMT+0900 (Korean Standard Time)time을 drag했을 때 실행되는 함수이다.
month에서 실행되지 않는다.
false를 반환하면 선택이 막힌다.
longPress의 문턱을 밀리초로 받는다.
default는 250 이다.
longPressThreshold는 touch device에서 slot을 선택할 때 쓰인다.
min은 week과 day에서 최소 time을 제한한다.
max은 week과 day에서 최대 time을 제한한다.
week과 day view에서 선택할 수 있는 time 증분을 결정한다.
return (
<div>
<Calendar
step={60}** // 60분 범위로 선택할 수 있음
...
/>
</div>
);step은 timeslot 1칸이 차지하는 시간이다.
timeslot은 time group을 만드는 slot의 개수이다.
step={30} timeslots={1}
step={60} timeslots={2}
“+ n more” link를 누르면 생략된 일정을 보여준다.
viewport의 모서리에서부터 떨어진 px 이다.
date header 또는 생략된 일정 link를 클릭했을 때마다 실행되는 callback 함수이다.
*drill down : 더 많은 정보를 찾기 위해 관련 텍스트나 아이콘 등을 클릭하여 마치 뚫고 들어가듯이 검색하는 것
drilldown action에 대하여 이동할 view의 name이다.
getDrilldownView가 특정되면 getDrilldownView가 쓰인다.
<Calendar
...
drilldownView="agenda"
/>기능적으로 drilldownView와 동등하다.
차이점은 view name을 반환하는 함수를 받는다는 것이다.
<Calendar
getDrilldownView**={(targetDate, currentViewName, configuredViewNames) =>
if (currentViewName === 'month' && configuredViewNames.includes('week'))
return 'week'
return null;
}}
/>calendar에 나타나는 date 범위가 달라졌을 때 실행되는 callback 함수이다.
start와 end를 가진 객체 또는 배열을 반환한다.
agenda view의 date prop으로부터 length(number of days)를 더하여 end date prop을 결정한다.
toolbar의 display 여부를 지정한다.
calender를 오른쪽에서 왼쪽(right-to-left)방향으로 읽는다.
event node에 적용될 className과 style props의 객체를 리턴하는 함수를 선택적으로 제공한다.
(
event: Object,
start: Date,
end: Date,
isSelected: boolean
) => { className?: string, style?: Object }time-slot node에 적용된다.
! layout이나 position을 바꾸면 calendar가 깨진다.
(date: Date) => { className?: string, style?: Object }day background에 적용된다.
그 외 slotPropgetter과 동일한 특성을 갖는다.
showMultiDayTimes는 일정이 다른 날까지 이어지는 event에 한하여 구체적인 start time과 end time을 calendar에 반영한다.
<Calendar
...
showMultiDayTimes={true}
/>주의!
일정이 하루 내에 이뤄지는 날에는 영향을 주지 않는다.
처음 scroll down되기 위해 내려야 할 pane의 정도를 결정한다.
calendar에 구체적인 culture code를 명시한다.
calendar에게 어떻게 포맷하고 date를 보여주는 지 전달한다.
component를 custom하여 calendar section의 rendering 방법을 바꾼다.
Event component가 전체 calender에서 명시가능하기 때문에 각 view type마다 다른 component을 제공할 수 있다.
let components = {
event: MyEvent, // used by each view (Month, Day, Week)
toolbar: MyToolbar,
agenda: {
event: MyAgendaEvent // with the agenda view use a different component to render events
}
}
...
<Calendar components={components} />localization하기 위해 컴포넌트에서 쓰는 문자를 재정의하는 속성이다.
main calendar의 <div>에 적용되는 Props이다.
공식 문서에 있는 내용은 다 써보고 정리를 했지만 이 외에도 더 다양한 기능들이 있는 것을 발견했다! 아래 링크 참고