Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方

Googleカレンダーは、入力した予定を他の人と共有したり、カレンダーを複数人共同で編集できるとても便利なツールです。また、埋め込みコードを発行すれば簡単にサイトに埋め込むことができます。

埋め込みコードを利用した場合、カレンダーの見た目が固定でカスタマイズできないため、既存のサイトの見た目に合わせることができず使い勝手はよくありません。

しかし、フリー配布ライブラリであるFullCalendarを使えば、サイトにキレイな見た目のカレンダーを設置することができます。

Googleカレンダーとリアルタイムに連携
CSSでデザインを自由に変更できる
月ごとのカレンダーの他、週ごとのカレンダーや予定リストの形で表示することもできる

デフォルトではシンプルなデザインですが、見た目のカスタマイズ性がとても高く、CSSを使うことができればオシャレなサイトにも馴染ませやすいのが特徴です。

Googleカレンダーは、イベント情報サイトなど、スケジュール周知が必要なサイトに導入すると便利です。手順は少し多いですが、あまり難しくないのでぜひ挑戦してみてください。

FullCalendarの設置

まずはFullCalendarで、自分のサイトにカレンダーを表示してみましょう。FullCalendarにアクセスし、GET STARTEDをクリックします。

さらにInitializing with script tagsをクリック。

FullCalendar設置のために必要なタグの記述例が出てきます。Googleカレンダーとの連携に必要なファイルをダウンロードするため、Downloadのリンクからzipファイルをダウンロードしておきましょう。必要なファイルは、package＞google-calendar内のJSファイルです。

コアファイルはCDNを利用します。すなわち、ファイルを自分のサーバーにアップロードするのではなく、外部サーバーに公開されているファイルを読み込みます。以下のようにタグを追記すればOKです。

<head>内にタグを記述

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  });
  calendar.render();
});
</script>

記述例のコードをそのままコピーし、張り付けます。さらに、Googleカレンダーとの連携に必要なJSファイルも読み込ませます。パスは必要に応じて書き換えてください。

<script src="calendar/google-calendar/index.global.js"></script>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js'></script>の次の行に追記するのが無難です。

FullCalendar公式サイトからダウンロードしたcalendar/google-calendar/index.global.jsをサーバーの適切な場所にアップロードするのをお忘れなく！このファイルがなければGoogleカレンダーと連携ができません。

<body>内のカレンダーを表示したいところにタグを記述

カレンダーを表示したい位置に、以下のタグを記述します。

<div id='calendar'></div>

ここまで作業してページをブラウザで表示すると、まっさらなカレンダーが表示されるはずです。次に、Googleカレンダーとの連携の設定を行いましょう。

Googleカレンダーとの連携

あらかじめGoogleカレンダーで、埋め込みカレンダーに表示しておきたい予定を作成し、「マイカレンダー」として登録しておきます。

GoogleカレンダーIDを取得する

Googleカレンダーにアクセスし、右上の歯車ボタンから「設定」を選択

埋め込みたい予定を紐づけたマイカレンダーを選び、「カレンダーの設定」ページを開く。下の方へスクロールし「一般公開して誰でも利用できるようにする」にチェックを入れる。

さらに下へスクロールすると、「カレンダーID」という@group.calendar.google.comで終わるIDが表示されていますので、これをコピーし、どこかにメモしておいてください。

GoogleAPIを取得する

GoogleAPIライブラリにアクセスし、下の方へスクロールすると、Google Calendar APIがあるので、クリック。

「有効にする」をクリック。

少し待機時間があった後、ページが遷移します。サイドバーの「認証情報」をクリックし、「認証情報を作成」から「APIキー」を選択します。

少し待つと「APIキーを作成しました」とポップアップが出て、APIキーが表示されます。これはコピーして、控えておきましょう。続いてAPIキーの設定を行うので、「APIキーを編集」リンクをクリックします。

API設定画面に移るので、以下の通りに設定します。

アプリケーションの制限の設定：ウェブサイト
ウェブサイトの制限：Googleカレンダーを埋め込みたいサイトのドメインをhttp://（https://）から入力（）
API の制限：「キーを制限」を選択した後、「Google Calendar API」を選択する

設定できたら、ページ最下部の「保存」をクリックします。

Google APIの設定で、指定したドメインからのリクエストでないとカレンダーが連携しないようになっているため、Googleカレンダーとの連携の確認は、ページをサーバーにアップロードしてから行います。

さて、先ほど取得したカレンダーIDとGoogleAPIを、<head>内にペーストしたscriptタグに、以下のように追記します。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    events:'カレンダーID',
    googleCalendarApiKey: 'Google API'
  });
  calendar.render();
});

initialVew: 'dayGridMonth'を含む、カレンダー設定を記述する各行の末尾に、半角コロン,を追記することを忘れずに。設定を一行書くごとに半角コロン,を入れなければ、エラーとなり動作しません。

ここまで作業すれば、Googleカレンダーとの連携が完了しているはずです。カレンダーを埋め込んだページをサーバーにアップロードし、ブラウザでアクセスして確認してみましょう。

連携が完了しましたが、表示が少し気になりますね。22日のところに「1p テスト」とありますが、「1p」とは「PM1時」のことを指しています。時間の表示フォーマットを少し変更したり、その他の細かな調整をしてみましょう。

細かな調整

時間の表示フォーマットを変更する

時間の表記がデフォルトでは「1p」という日本人にはなじみのない形式なので、変更します。eventTimeFormatの値を指定することで変更が可能です。

events:'カレンダーID',
googleCalendarApiKey: 'Google API',
eventTimeFormat: { hour: 'numeric', minute: '2-digit' },

このように指定すると時間の表記が「1:00 PM」のようになり、分かりやすくなります。

予定をクリックしてもGoogleカレンダーに飛ばないようにする

デフォルトでは予定の文字をクリックするとGoogleカレンダーに飛ばされてしまいます。文字をクリックしても何も起きないようにするには、APIキーを記述した行の下あたりに以下の記述を付け加えます。しつこいですが、設定を書くごとに末尾に半角コロン,をつけることを忘れないようにしてください。

events:'カレンダーID',
googleCalendarApiKey: 'Google API',
eventClick: function(info) {
  info.jsEvent.preventDefault();
},

予定にカーソルを載せると予定の名前が出てくるようにする

予定の名前が長いと、カレンダーのマスから予定の名前がはみ出て途切れてしまいます。

上の例では、15日の予定の名前が途切れているのがわかります。

そこで、予定にカーソルを合わせると予定の名前が出てくるようにします。導入にはTippy.jsというライブラリを利用します。

まずはTippy.jsを読み込むコードを追記します。<head>内のFullCalendarのライブラリ読み込みのすぐ後あたりに記述するのが無難でしょう。

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

さらに、設定の項目に以下の通りeventDidMountを設定します。

events:'カレンダーID',
googleCalendarApiKey: 'Google API',
eventDidMount: (e)=>{
  tippy(e.el, {
    content: e.event.title,
  });
},

すると、予定にカーソルを合わせたときに予定の名前が表示されるようになります。

カレンダーの表示期間を変更する

initialViewの値は初期ではdayGridMonth（月ごとに表示）ですが、以下のように変更することができます。

dayGridWeek（週ごとに表示）
dayGridDay（日ごとに表示）
timeGridWeek（週ごと、時間区切りで表示）
timeGridDay（日ごと、時間区切りで表示）

dayGridWeekはこのようになります。daiGridWeekやdayGridDayは、１日あたりの予定数が多い場合にオススメです。

timeGridWeekはこのようになります。時間区切りの細かな予定を表示したい場合に最適です。

カレンダーではなく予定リストにする

initialView: 'dayGridMonth',の「dayGridMonth」の値を以下の通りに変更すると、カレンダーではなく予定リストを表示できます。

listMonthで月ごとの予定リスト
listYearで年ごとの予定リスト
listWeekで週ごとの予定リスト
listDayで日ごとの予定リスト

CSSでカレンダーの見た目を自由に変更できます

その他、CSSを使えば枠線の有無や文字の色、マス目の背景など、カレンダーのデザインを自由に変更することができます。

カレンダーをCSSでカスタマイズするにあたっては、デベロッパーツールを使うことをおススメします。CSSをどのように記述すれば狙った部分が変更できるか、ブラウザで確認しながら試すことができるのでとても便利です。

デベロッパーツールの使い方を画像付き解説！CSS編集の強力な味方にしよう

CSSを編集してサイトをカスタマイズしたいけど、どういじればいいの？思うようにカスタマイズできない……。デベロッパーツールを使えば一発解決！ブラウザからCSSの編集・プレビューをすることができる、Web制作者にとっては心強いツールです。この記事ではデベロッパーツールの使いかたを画像付きで解説します。

コード全体

ここまでのカスタマイズを全て盛り込むと、コードの全体は以下の通りになります。カレンダーが上手く動作しない場合に参考にしてください。

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.5/index.global.min.js'></script>
<script src="calendar/google-calendar/index.global.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        googleCalendarApiKey: 'Google API',
        events:'カレンダーID',

      eventClick: function(info) {
        info.jsEvent.preventDefault();
      },
      eventTimeFormat: { hour: 'numeric', minute: '2-digit' },
      eventDidMount: (e)=>{
        tippy(e.el, {
          content: e.event.title,
        });
      },
    });
    calendar.render();
  });

</script>

ぜひご活用ください！

この記事を書いた人