Nuxt.jsでFullCalendarを使う

1 min read読了の目安(約1100字

FullCalenerって便利そうなカレンダーライブラリをちょっと触ってみた。

packageをインストール

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

コード

<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>

確認サイト

https://full-calender-sample.vercel.app/

まとめ

  • Template Refsが準備完了してから、Calendarを生成したいので、mounted後に生成、表示する
  • dateClickを使うために、 interactionPlugin が必要
  • dateClickのコールバック関数の引数には Date, 日付の文字列などが含まれている

参考

https://fullcalendar.io/docs/getting-started