https://webstudioleaf.com/blog/js/fullcal-gcal

---

GoogleカレンダーのAPIキーを取得したい

https://webstudioleaf.com/blog/js/gcal-api

グーグルアカウントにログインしている状態で
https://console.cloud.google.com/apis/library?hl=ja へアクセス。

---

FullCalendarの表示をカスタマイズする

https://webstudioleaf.com/blog/js/fullcal-custom

FullCalnedarとGoogleカレンダーを連携させるための手順の続きです。
前回はGoogleカレンダーのAPIキーを取得するところまでできました。

GoogleカレンダーのAPIキーを取得したい

先日、FullCalnedarとGoogleカレンダーを連携させる機会があったので、手順のメモです。 FullCalendarとは？ FullC…

今回はその続きです。

Googleカレンダーの準備をする

まずは表示させたいGoogleカレンダーを準備します。

「設定と共有画面」を開く

Googleカレンダーへアクセスし、表示させたいカレンダーの設定画面を開きます。
縦の「･･･」をクリックして「設定と共有」画面を開きます。

予定のアクセス権限

「一般公開して誰でも利用できるようにする」にチェックを入れます。

カレンダーの統合

カレンダーのIDを後から使うのでメモっておきます。

FullCalendarの準備をする

前回のおさらい・FullCalendarとは

前回にも紹介しましたが、FullCalendarとはカレンダーを表示させることができるJavaScriptのオープンソースプラグインです。

FullCalendar – JavaScript Event Calendar

https://fullcalendar.io

FullCalendar をダウンロードする

FullCalendatのGitHubからダウンロードします。
Code＞Download ZIP でダウンロードできます。

必要なファイルを用意する

ZIPファイルを展開後必要なファイルを用意します。
必要なファイルは

• main.css
• main.js
• ja.js（日本語化用ファイル）

の3点と表示用のjsです。

設置例

好きなところに置いておきます。私はCSSもおかまいなしにjsのフォルダの中に突っ込んでます…。

<link rel='stylesheet' id='calendar-style-css'  href='js/fullcalendar/main.css' type='text/css' />
<script type='text/javascript' src='js/fullcalendar/main.js'></script>
<script type='text/javascript' src='js/fullcalendar/ja.js'></script>
<script type='text/javascript' src='js/show-calendar.js'></script>

一番下のshow-calendar.jsは表示用のファイルです。

HTMLを用意する

カレンダーを表示させたい箇所に次のHTMLを置いておきます。

<div id="calendar"></div>

表示用ソースコード

とりあえずFullCalenderをダウンロードしたときに入っていたサンプルコードで表示できるか試してみます。

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,listYear'
      },

      displayEventTime: false,
      googleCalendarApiKey: 'ここに取得したAPIキー',
      events: 'ここにカレンダーID',

      eventClick: function(arg) {
        window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600');
        arg.jsEvent.preventDefault()
      },

      loading: function(bool) {
        document.getElementById('loading').style.display =
          bool ? 'block' : 'none';
      }

    });
    calendar.render();
  });
</script>

HTMLを開いて表示してみましょう～

無事表示されました！