【忘却のJavaScript#4】Vue.jsでガントチャートを表示してみる

やること

前回使ったFullCalendarでDayGridとは別のタイプのカレンダーを表示させる
Timeline Viewというガントチャートが書けるライブラリを使ってみる

用意するもの

「【忘却のJavaScript#3】Vue.jsでカレンダーを表示してみる」で構築したVue.js環境
FullCalendar

FullCalendarのインストール

コマンドプロンプトから以下のコマンドを実行し、ライブラリをインストールする
- 今回は"Timeline View"というガントチャートが表示できるタイプのライブラリを使ってみる

> npm install --save @fullcalendar/resource-timeline

以下のようなメッセージが出たら、インストール成功

・・・
+ @fullcalendar/resource-timeline@4.1.0
added 3 packages from 1 contributor and audited 43477 packages in 29.741s

Timeline.jsの作成

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

Timeline.vue：

<template>
  <!-- Timeline Viewを表示 -->
  <FullCalendar
    :schedulerLicenseKey="calendarCustomize.schedulerLicenseKey"
    :plugins="calendarCustomize.plugins"
    :defaultView="calendarCustomize.defaultView"
    :height="calendarCustomize.height"
    :resources="calendarCustomize.resources"
    :events="calendarCustomize.events"
    :slotDuration="calendarCustomize.slotDuration"
  />
</template>

<style lang="scss">
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/timeline/main.css";
@import "~@fullcalendar/resource-timeline/main.css";
</style>

<script>
import FullCalendar from "@fullcalendar/vue";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarCustomize: {
        // ライセンス要求表示を非表示化
        schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
        // 使用するプラグイン
        plugins: [resourceTimelinePlugin],
        // 表示形式 (今回はTimeline View)
        defaultView: "resourceTimelineDay",
        // タイムラインの高さ (項目数に応じて自動調整)
        height: "auto",
        // 時間軸の表示幅 (今回は2時間ごと)
        slotDuration: { hours: 2 },
        // Resourcesのデモデータ
        resources:
          "https://fullcalendar.io/demo-resources.json?with-nesting&with-colors",
        // Resourcesごとのイベントのデモデータ
        events:
          "https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline"
      }
    };
  }
};
</script>