Nuxt.jsでカレンダー予定管理機能を導入

前回の記事からFullcalendarのv4は正式にリリースされ、Vue.js用のライブラリも提供されたので、最新のFullcalendar導入方法を記載します。

前回の記事
Nuxt.jsでカレンダープラグイン「Fullcalendar」を使ってみた

環境

Nuxt.js v2.6.2
Express.js v4.16.4
backpack-core
Fullcalendar v4

1．Fullcalendarベースのモジュールをインストール

yarn add @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/moment @fullcalendar/timegrid @fullcalendar/interaction

インストール完了したらvueファイルの設定

2．FullcalendarをNuxt.jsへ組み込む

components/calendar.vue

<template>
  <FullCalendar
    defaultView = "dayGridMonth"
    :plugins = "calendarPlugins"
    :locale = "locale"
    :events = "events"
    :editable = "true"
    :selectable = "true"
    :ignoreTimezone = "false"
    :nowIndicator = "true"
    :header = "header"
    :eventLimit = "true"
    :firstDay = "0"
    :weekends = "true"
    weekMode = "fixed"
    :weekNumbers = "false"
    :slotDuration = "slotDuration"
    :snapDuration = "snapDuration"
    :allDaySlot = "false"
    allDayText = "allday"
    :slotMinutes = "15"
    :snapMinutes = "15"
    :slotLabelFormat = "slotLabelFormat"
    :firstHour = "9"
    :defaultTimedEventDuration = "defaultTimedEventDuration"
    :axisFormat = "axisFormat"
    :timeFormat = "timeFormat"
    :maxTime = "maxTimes"
    :minTime = "minTimes"
    @eventClick="eventClick"
    @dateClick="dateClick"
  />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import momentPlugin from '@fullcalendar/moment'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import jaLocale from '@fullcalendar/core/locales/ja'
import moment from 'moment'
export default {
  components: {
    FullCalendar
  },
  props: {
    event: {
      type: Array,
      required: false
    }
  },
  data() {
    return {
      calendarPlugins: [ dayGridPlugin, momentPlugin, timeGridPlugin, interactionPlugin ],
      locale: jaLocale,
      events: this.event,
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      slotDuration: '00:30:00',
      snapDuration: '00:15:00',
      slotLabelFormat: 'H:mm',
      defaultTimedEventDuration: '10:00:00',
      axisFormat: 'H:mm',
      timeFormat: 'H:mm',
      minTimes: '07:00',
      maxTimes: '19:00',
      buttonText: {
        prev: '',
        next: '',
        prevYear: '',
        nextYear: ''
      }
    }
  },
  methods: {
    eventClick(info) {
      alert('Event: ' + info.event.title)
      alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY)
      alert('View: ' + info.view.type)
      // change the border color just for fun
      info.el.style.borderColor = 'red'
    },
    dateClick(info) {
      alert('Clicked on: ' + info.dateStr)
      alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY)
      alert('Current view: ' + info.view.type)
      info.dayEl.style.backgroundColor = 'red'
    }
  }
}
</script>

まずはcomponents可にカレンダーのコンポーネントを設定してあげます。

次にpluginsでコンポーネントの登録をします。

plugins/calendar.js

import Vue from 'vue'
import Calendar from '~/components/Calendar'

Vue.component('full-calendar', Calendar)

pluginでコンポーネントを読み込み、full-calendar(任意の名前)でコンポーネント登録をする。

その後pluginをnuxt.config.jsで読み込む

nuxt.config.js

plugins: [
    { src: '~/plugins/calendar.js', ssr: false }
],

これでコンポーネントの呼び出し準備完了。

最後にvueファイル上で読み込んであげます。

pages/index.vue

<template>
    <full-calendar :event="events" />
</template>
<script>
import moment from 'moment'
export default {
  async asyncData({ app, store, params }) {
    const data = await app.$axios.$get(`/api/events/${params.id}`)
    return {
      events: data
    }
  }
}
</script>
<style lang="scss" scope>
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
import '@fullcalendar/list/main.css';
</style>

今回はデータベースからevent情報を取得したケースで記載してます。

これでカレンダーが表示されます。

基本的に親要素と子要素の関係でデータの行き来をさせれば、
普段のコンポーネントと変わらず使えると思います。

Vue.jsに対応してくれたのはありがたいですね。
今後もどう変化していくか楽しみです。