高機能でかつ軽快に動作するカレンダーFullCalendarをNuxt.jsで使う

$ npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

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

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

module.exports = {
  mode: 'universal',
// ...省略...
/*
  ** Plugins to load before mounting the App
  */
  plugins: [
     // 以下を追記
    { src: '~/plugins/vue-full-calendar', ssr: false }
  ],

// ...省略...
}

<template>
  <FullCalendar default-view="dayGridMonth" :plugins="calendarPlugins" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  data () {
    return {
      // 使用したいプラグインを以下で指定。事前にimportでインポートする。
      calendarPlugins: [ 
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin
      ]
    }
  }
}
</script>
<style>
@import '~/node_modules/@fullcalendar/core/main.css';
@import '~/node_modules/@fullcalendar/daygrid/main.css';
@import '~/node_modules/@fullcalendar/timegrid/main.css';
</style>

<template>
  <section class="section">
    <div class="columns is-mobile">
      <full-calendar />
    </div>
  </section>
</template>

<script>
export default {
  name: 'Schedule'
}
</script>

<template>
  <FullCalendar
    default-view="dayGridMonth"
    :locale="locale"
    :header="calendarHeader"
    :weekends="calendarWeekends"
    :plugins="calendarPlugins"
    :events="calendarEvents"
    @dateClick="handleDateClick"
  />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import jaLocale from '@fullcalendar/core/locales/ja' // 日本語化用

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data () {
    return {
      locale: jaLocale, // 日本語化
      // カレンダーヘッダーのデザイン
      calendarHeader: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      calendarWeekends: true, // 土日を表示するか
      // カレンダーで使用するプラグイン
      calendarPlugins: [ 
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin
      ],
      // カレンダーに表示するスケジュール一覧
      calendarEvents:  [
        {
          title: '報告会',
          start: '2019-09-09T10:00:00',
          end : '2019-09-09T12:30:00',
        },
        {
          title: 'ミーティング',
          start: '2019-09-12T10:30:00',
          end : '2019-09-12T12:30:00',
        },
        {
          title: '打ち合わせ',
          start: '2019-09-18T13:30:00',
          end : '2019-09-18T14:30:00',
        },
      ]
    }
  },
  methods: {
    handleDateClick (arg) {
      if (confirm('新しいスケジュールを' + arg.dateStr + 'に追加しますか ?')) {
        this.calendarEvents.push({ // add new event data
          title: '新規スケジュール',
          start: arg.date,
          allDay: arg.allDay
        })
      }
    }
  }
}
</script>
<style>
@import '~/node_modules/@fullcalendar/core/main.css';
@import '~/node_modules/@fullcalendar/daygrid/main.css';
@import '~/node_modules/@fullcalendar/timegrid/main.css';
</style>

{
          title: 'ミーティング',
          start: '2019-09-12T10:30:00',
          end: '2019-09-12T11:30:00',
          url: 'https://virment.com',
          extendedProps: {
            department: '総務部'
          },
          description: '総務部とのミーティング'
        }