【FullCalendar】Googleカレンダーのカスタマイズ例（コピペ用）

6911 ワード
HTML JavaScript GoogleCalendar CSS FullCalendar HTML テキストリンク

FullCalendar の使い方とカスタマイズ例を紹介する。

手順

1. APIキーの取得

Google Cloud Platformにアクセスし、（メニュー）-->「APIとサービス」-->「ライブラリ」

-->「Google Calendar API」

-->「有効にする」

左上にプロジェクト名が表示されていることを確認（プロジェクトが作成されていなければ、新規プロジェクトを作成）-->（メニュー）-->「APIとサービス」-->「認証情報」

-->「認証情報を作成」-->「APIキー」

APIキーが生成されたら、キーを制限する

2. FullCalendar を使う

初期化

次のいずれかの方法で標準の fullcalendar バンドルを入手する。

それから、次のように初期化コードを書く。

<!DOCTYPE html>
<html lang='en'>
  <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>

デモページ

この fullcalendar バンドルの main.js と main.css は次のパッケージを含む：

3. カスタマイズ例

See the Pen Customize Google Calendar by Probability Hill (@probabilityhill) on CodePen.