Nuxt.js에서 Full Calendar 사용

패키지 설치

코드

<template>
  <div class="calendar" ref="calendarRef"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api'
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default defineComponent({
  setup() {

    const calendarRef = ref<HTMLDivElement | null>(null)

    onMounted(() => {
      if (!calendarRef.value) return
      const calendar = new Calendar(calendarRef.value, {
        dateClick: (e) => {
          alert(`クリックされた日は、${e.dateStr}です。`)
        },
        plugins: [dayGridPlugin, interactionPlugin]
      })

      calendar.render()
    })

    return {
      calendarRef
    }
  }
})
</script>

사이트 축소판 그림

총결산

참고 자료