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

[FullCalendar](https://fullcalendar.io/) の使い方とカスタマイズ例を紹介する。

## 手順
### 1. APIキーの取得
[Google Cloud Platform](https://console.cloud.google.com/) にアクセスし、（メニュー）-->「APIとサービス」-->「ライブラリ」
![スクリーンショット (213).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/d01c4152-831a-f584-a053-303c9a2361a4.png)
***
-->「Google Calendar API」
![スクリーンショット (214).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/b27d3d79-c1c2-a50c-8432-ef7e20026daf.png)
***
-->「有効にする」
![スクリーンショット (215).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/06cd0a69-4e92-1691-4caf-1dfa77204120.png)
***
左上にプロジェクト名が表示されていることを確認（プロジェクトが作成されていなければ、新規プロジェクトを作成）-->（メニュー）-->「APIとサービス」-->「認証情報」
![スクリーンショット (216).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/c1f1dba1-4394-7d89-3882-11093c479bf8.png)
***
-->「認証情報を作成」-->「APIキー」
![スクリーンショット (217).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/f52265d7-077c-67f2-0f25-ecd4960a77a1.png)
***
APIキーが生成されたら、キーを制限する
![スクリーンショット (218).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/05e25ef5-c676-13a3-8dbc-389f461d3178.png)
![スクリーンショット (219).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/191badf3-c630-ba90-0c69-f9f1624108ea.png)

### 2. FullCalendar を使う

[デモページ](https://fullcalendar.io/docs/initialize-globals-demo)

#### 初期化

https://fullcalendar.io/docs/initialize-globals

<details><summary>バージョン <code>5.9.0</code> の場合</summary>

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

+ Download: [fullcalendar-5.9.0.zip](https://github.com/fullcalendar/fullcalendar/releases/download/v5.9.0/fullcalendar-5.9.0.zip)
+ CDN: [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar?version=5.9.0)
+ NPM: `npm install fullcalendar`

それから、次のように初期化コードを書く。下記の例では、zipファイルをダウンロードし、libフォルダ内の `main.min.css`, `main.min.js` を使用している。（`main.css`, `main.js` でも可）

```:ディレクトリ構成
/
 ├ fullcalendar/
 │  ├ main.min.css
 │  └ main.min.js
 └ index.html
```

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.min.css' rel='stylesheet' />
    <script src='fullcalendar/main.min.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.min.js`) と `main.css` (`main.min.css`) は次のパッケージを含む：

+ @fullcalendar/core
+ @fullcalendar/interaction（for [date selecting](https://fullcalendar.io/docs/date-clicking-selecting), [event dragging & resizing](https://fullcalendar.io/docs/event-dragging-resizing)）
+ @fullcalendar/daygrid（for [month](https://fullcalendar.io/docs/month-view) and [dayGrid](https://fullcalendar.io/docs/daygrid-view) views）
+ @fullcalendar/timegrid (for [timeGrid](https://fullcalendar.io/docs/timegrid-view) views)
+ @fullcalendar/list（for [list views](https://fullcalendar.io/docs/list-view)）
+ @fullcalendar/bootstrap（requires 3rd-party Bootstrap/FontAwesome packages. [more info](https://fullcalendar.io/docs/bootstrap-theme)）
+ @fullcalendar/google-calendar（[more info](https://fullcalendar.io/docs/google-calendar)）
</details>

バージョン `6.1.14` の場合

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

+ Download: [fullcalendar-6.1.14.zip](https://github.com/fullcalendar/fullcalendar/releases/download/v6.1.14/fullcalendar-6.1.14.zip)
+ CDN: [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar?version=6.1.14)
+ NPM: `npm install fullcalendar`

それから、次のように初期化コードを書く。下記の例では、zipファイルをダウンロードし、distフォルダ内の `index.global.min.js` を使用している。（`index.global.js` でも可）

```:ディレクトリ構成
/
 ├ fullcalendar/
 │  └ index.global.min.js
 └ index.html
```

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='fullcalendar/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>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>
```

この `fullcalendar` バンドルの `index.global.js` (`index.global.min.js`) は次のパッケージを含む：

+ @fullcalendar/core
+ @fullcalendar/interaction（for [date selecting](https://fullcalendar.io/docs/date-clicking-selecting), [event dragging & resizing](https://fullcalendar.io/docs/event-dragging-resizing)）
+ @fullcalendar/daygrid（for [month](https://fullcalendar.io/docs/month-view) and [dayGrid](https://fullcalendar.io/docs/daygrid-view) views）
+ @fullcalendar/timegrid (for [timeGrid](https://fullcalendar.io/docs/timegrid-view) views)
+ @fullcalendar/list（for [list views](https://fullcalendar.io/docs/list-view)）

### 3. カスタマイズ例
<details><summary>バージョン <code>5.9.0</code> の場合</summary>

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="result" data-slug-hash="RwgJmMK" data-user="probabilityhill" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/probabilityhill/pen/RwgJmMK">
  Customize Google Calendar</a> by Probability Hill (<a href="https://codepen.io/probabilityhill">@probabilityhill</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</details>

バージョン `6.1.14` の場合

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="result" data-slug-hash="vYqYpMq" data-pen-title="Customize Google Calendar with FullCalendar 6.1.14" data-user="probabilityhill" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/probabilityhill/pen/vYqYpMq">
  Customize Google Calendar with FullCalendar 6.1.14</a> by Probability Hill (<a href="https://codepen.io/probabilityhill">@probabilityhill</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>