カレンダーページを「fullcalendar-vue」で実装する

カレンダーページを「fullcalendar-vue」で実装する 0

fullcalendar-vueとは

カレンダーページを「fullcalendar-vue」で実装する 0

 

fullcalendar-vueは、FullCalendarが配布しているVue.js用の公式カレンダーコンポーネントです。
FullCalendarは、Githubスター9000超え、Used by 18000超えのモンスターライブラリです。
ビューの表示が多義に渡り、月のビューから時間のタイムラインまで選択することができます。
日付のクリックイベントやドラックセレクトも行えます。

 

インストール

以下のnpmCDNを使ってインストールします。

npm

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

CDN

<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.css" rel='stylesheet'>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.css" rel='stylesheet'>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/fullcalendar/fullcalendar-vue/

 

導入手順

カレンダーコンポーネントを実装します。

1. ライブラリの取り込み

(1)webpack等の場合 ※モジュール版は未検証です。

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import FullCalendarInteraction from '@fullcalendar/interaction';
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';

(2)WEBページの場合

const dayGridPlugin = window.FullCalendarDayGrid.default;
const FullCalendarInteraction = window.FullCalendarInteraction.default;

2.メソッドを設定

var today = new Date();
var day1 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+1);
var day2 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+2);
var day3 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+3);

Vue.component('calender', {
  template: '#calender',
  data: function() {
    return {
      calendarPlugins: [ 
        dayGridPlugin, 
        FullCalendarInteraction 
      ],
      events: [
        { title: 'event 1', date: day1 },
        { title: 'event 2', date: day2 }
      ],
      header:{
        left:   'title',
        center: 'addPostButton',
        right:  'today prev,next'
      },
      buttonText: {
        today: '今日'
      },
      customButtons: {
        addPostButton: {
          text: '追加!',
          click: function() {
            app.$children[0].events.push({
              title: 'event 3', 
              date: day3
            });
          }
        }
      },
    }
  },
  methods: {
      handleDateClick: function(info) {
        console.log(info);
        alert('click day :' + info.dateStr);
      }
  }
});

let app = new Vue({
  el: '#app',
});

3. テンプレートを準備

<fullCalendar> コンポーネントのイベントがキャメルケースになっているので、HTMLに直書きですとイベントが動作しません

コンポーネントのカスタムイベントでキャメルケース名のイベントが動かない時の対処法

 

そこで、 <fullCalendar> コンポーネントを別のコンポーネントに取り込みます。

<div id="app">
    <script type="text/x-template" id="calender">
      <fullCalendar 
      @dateClick="handleDateClick"
      ref="fullCalendar"
      default-view="dayGridMonth" 
      :plugins="calendarPlugins" 
      :locale="'ja'" 
      :events="events" 
      :header="header"
      :buttonText="buttonText"
      :customButtons="customButtons"
      />
    </script>
    <calender />
</div>

 

サンプル

>>専用ページで確認する

 

「'Symbol' は定義されていません」

IE11以前のブラウザを使うと上記のエラーが表示されます。

これはES2015に対応してないのが原因みたいです。

ひとまず以下のライブラリを呼び出せば解決します。

<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/dist/polyfill.min.js"></script>

 

さいごに

カレンダーページを作成するカレンダーコンポーネントでした。

無料なのに超高機能なライブラリです。
8月の頭辺りから調査を開始していましたが、サンプルを実装するまでに多大な労力を要しました。
(疲れて記事が導入までになってしまいました・・・
もちろん苦労に応じた恩恵のあるライブラリです。

ぜひ試してみてください。

今日はこの辺でー

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , ,