[FullCalendar] Vue로 FullCalendar 띄우기

목표 : Vue로 FullCalendar 띄워주기

 

FullCalendar을 사용할 수 있도록 package를 설치해준다.

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

아래의 코드 처럼 script에서 css도 import해주면 화면에 FullCalendar가 나타날 것이다.

<template>
    <div>
        <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
    </div>
</template>

<script>

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarPlugins: [ dayGridPlugin ]
    }
  }
}

</script>

보여지는 화면

 

 

참고 : https://fullcalendar.io/docs/vue