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

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

手順

1. APIキーの取得

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

-->「Google Calendar API」

-->「有効にする」

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

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

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

2. FullCalendar を使う

初期化

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

Download: fullcalendar-5.9.0.zip
CDN: jsdelivr
NPM: npm install 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 は次のパッケージを含む：

@fullcalendar/core
@fullcalendar/interaction（for date selecting, event dragging & resizing）
@fullcalendar/daygrid（for month and dayGrid views）
@fullcalendar/timegrid (for timeGrid views)
@fullcalendar/list（for list views）
@fullcalendar/bootstrap（requires 3rd-party Bootstrap/FontAwesome packages. more info）
@fullcalendar/google-calendar（more info）

3. カスタマイズ例

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