調べ物

FullCalendarを使ってみた

2021-04-14

Googleカレンダーを使えば簡単に関係者との共有やWebに貼り付ける事ができます。 しかし、スマホで見たときに表示がイケてない。

そこで見た目をゴリゴリカスタマイズできるFullCalendarを使ってみました。

目次

  1. はじめに

  2. FullCalendarとは？

    1. ダウンロード
    2. セットアップ
    3. Googleカレンダーの予定を取り込む
    4. 常にリスト表示にしたい
  3. まとめ

はじめに

Basic認証をかけたい に続いて、今度はチームのカレンダーをWeb上で共有したいと相談がありました。 「Googleカレンダーを使ったら？」とアドバイスしたところ、

  • どうやって使うの？
  • Googleアカウントって何？
  • 他のチームではっつけてあるあのカレンダーね。リスト表示にしてほしい

という意見をいただきました。

そこで、要求された「リスト表示」の実現のために、データソースはGoogleカレンダーを使い、表示に FullCalendarの構成で実現を考えました。

FullCalendarとは？

FullCalendarは、JavaScriptで動くオープンソースで、10年以上の実績があります(有料プランもあります）。

alt text

公式サイト

対応しているフレームワーク

  • React
  • Vue
  • Angular
  • TypeScript

ダウンロード

公式サイトのGetting Startedにあるように、３つの内、いずれかで取得します。

  • zipダウンロード
  • CDN (jsdelivr)
  • NPN

私は、zipでひとまずやってみました。

セットアップ

<script> タグをカレンダーを表示したいHTMLに差し込むだけでOK。

サンプルコード

<!DOCTYPE html>
<html lang='jp'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    ここに差し込む！
    <div id='calendar'></div>
  </body>
</html>

公式サイトのGetting Started

これだけで、Fullcalendaerを使えるようになりました。

Googleカレンダーの予定を取り込む

Googleカレンダーの予定（FullCalendarでは eventと呼ぶようです）をFullCalendarに表示するには、以下をGoogleカレンダーで行う必要があります。

  • Google Calendar APIを得る
  • 連携したいGoogleカレンダーをPublic設定にする
  • 連携したいGoogle Calendar’s IDを知る

各詳細手順は、公式サイトのevents from Google Calendarを参照ください。

サンプルコード

<script type='text/javascript'>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      googleCalendarApiKey: '<YOUR API KEY>',
      eventSources: {
          googleCalendarId: 'abcd1234@group.calendar.google.com'
      },
    },

    calendar.render();
  });

</script>

常にリスト表示にしたい

要望された「リスト表示にしたい」を実現してみます。 設定はいたって簡単で、次の行を加えるだけ。

      let calendar = new FullCalendar.Calendar(calendarEl, {

      initialView: 'listMonth',

まとめ

  • Fullcalendarで目的のリスト表示は簡単に！
  • Fullcalendarは他にも細かくたくさんチューニングができるのですが、それは公式サイトを辛抱強く解読してTry＆Errorでやってみるとよいかと思います。

Googleカレンダーを使ってもらうようにするためには別途運用案もセットで提案が必要に。。

© 2023 tk2021