Nuxt.jsでカレンダープラグイン「Fullcalendar」を使ってみたパート２

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

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

前回の記事  
[Nuxt.jsでカレンダープラグイン「Fullcalendar」を使ってみた](https://qiita.com/sauzar18/items/a9c1d5dab89a16dd4b0f)

## 環境

- [Nuxt.js](https://ja.nuxtjs.org/guide/) v2.6.2
- Express.js v4.16.4
- backpack-core
- [Fullcalendar v4](https://fullcalendar.io/docs/v4)

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

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

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

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

```vue: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でコンポーネントの登録をします。

```js:plugins/calendar.js
import Vue from 'vue'
import Calendar from '~/components/Calendar'

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

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

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

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

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

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

```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に対応してくれたのはありがたいですね。
今後もどう変化していくか楽しみです。