🗓️

Nuxt.jsでFullCalendarを使う

2020/11/03に公開

JavaScript

Nuxt

tech

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>

確認サイト

まとめ

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

Nuxt.jsでFullCalendarを使う

packageをインストール

コード

確認サイト

まとめ

参考

Discussion