Fullcalendar React props : selectable, dateClick(select) 등 Interaction 설정 및 사용법

 

제목에서와 같이 해당 옵션들을 사용하기 위해서는 interactionPlugin를 사용해야만 selectable, dateClick등의 옵션이 구현된 interaction클래스에 접근이 가능하다.

따라서 interaction 을 dependencies로 추가해야만 한다.

package.json에 가보면 dependencies에 "@fullcalendar/interaction" 속성이 존재하지 않는다.

interaction은 fullcalendar api를 설치할때 기본적으로 함께 디펜던시가 추가되지 않으므로 따로 npm을 설치해야한다.

 

터미널에 아래 명령어를 입력해본다.

npm install --save "@fullcalendar/interaction"

 

버전차이등의 오류가 발생하거나 npm 설치를 실패할경우 아래와 같이 --force옵션을 통해 강제로 설치해준다.

npm install --save "@fullcalendar/interaction"

 

아래와 같이 fullcalendar 기본적으로 import해야하는 2줄의 코드외에 아래 3번째 줄에 해당하는 import문을 추가해준다.

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction" // import할것!

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction" // import할것!

export default function DietMenu () {
	return(
    	<FullCalendar plugins={[ dayGridPlugin, interactionPlugin]}/>
        {/*interactionPlugin 플러그인을 추가한다!*/}
    )
}