【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる

JavaScript Vue.js

目次

やること

FullCalendarをVue.jsに取り込んで、カレンダーを表示させてみる

「FullCalendar」とは？

用意するもの

FullCalendarのインストール

  • コマンドプロンプトから以下のコマンドを実行し、ライブラリをインストールする
    • 今回は"daygrid"という卓上カレンダーによくあるタイプのカレンダーのライブラリを使ってみる
    • "core"と"vue"とはFullcalendarのメインコードとvue用のアダプタ
> npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

  • 以下のようなメッセージが出たら、インストール成功
    • エラーが出る場合は後述の「npm installにてエラーが出る場合」を参照してみください
・・・
+ @fullcalendar/core@4.1.0
+ @fullcalendar/daygrid@4.1.0
+ @fullcalendar/vue@4.1.1
added 150 packages from 218 contributors, removed 52 packages, updated 1474 packages and audited 42927 packages in 128.145s

Sassのインストール

  • コマンドプロンプトから以下のコマンドを実行し、ライブラリをインストールする
    • ないとcssをインポートして、ビルドする際に怒られるので入れておく
> npm install sass-loader
> npm install node-sass

  • 以下のようなメッセージが出たら、インストール成功
・・・
+ sass-loader@7.1.0
added 10 packages from 17 contributors, updated 14 packages and audited 42949 packages in 48.009s
・・・
+ node-sass@4.12.0
added 58 packages from 58 contributors in 43.488s

Calendar.jsの作成

  • src\components配下にCalendar.vueを作成
  • 以下の通り、FullCalendarライブラリの読み込みと画面表示を実装

Calendar.vue：

<template>
  <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarPlugins: [ dayGridPlugin ]
    }
  }
};
</script>

router.jsの更新

  • src\router.jsにCalendar.vueへのリクエストパスを記述

router.vue：

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/calendar",
      name: "calendar",
      component: () => import("./components/Calendar")
    }
  ]
});

カレンダーの表示

f:id:wingfair:20190515235855p:plain
FullCalendarのDayGrid

npm installにてエラーが出る場合

"EPERM: operation not permitted"エラーが出る場合

エラー内容

以下のようなエラーが出てしまうことがある。
VSCodeでプロジェクトフォルダを開いていたせいか、ファイルを掴まれていて正常にインストールできていない模様。

npm ERR! Error: EPERM: operation not permitted, ・・・
対処

原因究明をしっかりやったわけではないので、あくまで私の場合はこうやったら解決できたという一例です。

  • VSCodeなどテキストエディタを開いている場合は一度閉じてから、npm installを再実行してみる
  • それでもエラーが出る場合は以下のコマンドでnpmのキャッシュを強制的にクリアしてから、npm installを再実行してみる
npm cache clean --force

  • それでもエラーが出る場合はOS再起動し、npm installを再実行してみる

"Maximum call stack size exceeded"エラーが出る場合

エラー内容

上記の"operation not permitted"を解消されても、以下のようなエラーが出てしまうことがある。
エラーメッセージ的には一度に実行できるシステムコールの回数を上限を超えている模様。

npm ERR! Maximum call stack size exceeded
対処

こちらも原因究明をしっかりやったわけではないので、あくまで私の場合はこうやったら解決したという一例です。

  • 以下のコマンドを実行後にnpm installを再実行
npm rebuild
npm install @vue/cli-service -D

  • vue/cli-service -Dを実行しているのは、cli-serviceが消えてしまっていたため
    • "npm cache clean --froce"の影響・・？

参考

以上。