[FullCalendar] interaction설치해서 dateClick handler사용하기

목표 : 날짜를 클릭하면 해당 날짜가 화면에 alert되도록 한다.

 

FullCalendar에서 날짜를 클릭하면 발생하는 events를 dateClick handler라고 한다.

<FullCalendar @dateClick="handleDateClick" :plugins="calendarPlugins" />

위에 코드처럼 @dateClick="handleDateClick"을 추가해주면, 날짜를 클릭했을 때 handleDateClick 메서드가 실행될 것이다. handleDateClick 메서드는 클릭된 날짜를 alert해주는 메서드로 만들어 주었다.

methods: {
  handleDateClick(arg) {
    alert(arg.date)
  }
}

 

하지만, 아무리 클릭해도 날짜가 alert되지 않았다. FullCalendar의 dateClick함수를 찾아보고 문서를 찾아보다가 interaction을 추가 해주어야된다는 것을 알았다.

npm install --save @fullcalendar/interaction

FullCalendar interaction을 설치해주고 아래 코드처럼 script에도 추가해 주었다.

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'		//추가
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarPlugins: [ interactionPlugin, dayGridPlugin ]		//interactionPlugin추가
    }
  },
  methods: {
  handleDateClick(arg) {
    alert(arg.date)
  	}
  }
}

 

그러면 아래의 화면처럼 클릭한 날짜가 alert된다.