Contents
Google CalendarをHTMLに埋め込むと、下の画像のように予め決まったデザインでの出力になってしまいます。
デザインを変えようにも、予め決まってしまっているので、この状態からのカスタマイズには限界があります。
Google Calendarは更新が便利なので、デザインも自由にカスタマイズしたい！と思う方もいるかも知れません。
そこで、cssを編集し自分でデザインしたカレンダーを使う方法を、この記事で紹介します。
Googleカレンダーを作成
まず自分のGoogleアカウントにログインして、Googleカレンダーへアクセスします。
アクセスしたら下の画像の ＋（プラスマーク）をクリックします。
プラスマークをクリックとメニューが出てくるので、その中から新しいカレンダーを作成をクリックします。
すると下の画像のような画面になるので、作りたいカレンダーの名前を決めてカレンダーを作成します。
カレンダーを作成したら、設定から作ったカレンダーを選択し、一般公開して誰でも利用できるようにするにチェックします。
同じ画面の下の方に行くと、カレンダーIDなどがあります。
このカレンダーIDは後ほど必要になってくるので、常に見れる状態にしておきましょう。
GoogleカレンダーのAPIを取得
次にGoogleAPIライブラリにアクセスします。
アクセスしたら、「Google Calendar API」を探しクリックします。
クリックしたら「有効にする」ボタンから、APIを有効化させます。
有効化させたら
認証情報 → 認証情報を作成 → APIキー
を選択します。
選択すると、APIキーが作成されます。
これも後ほど必要になるので、見れる状態にしておきましょう。
APIキーが作成できたら、そのAPIの設定を行います。
認証情報のページに、制作したAPIキーがあるので、それをクリックします。
すると下の画像のような設定画面が出てきます。
- HTTPリファラー
- キーを制限にチェック
- Google Calendar APIを選択
カレンダーを導入したいサイトのドメインが決まっていれば、項目を追加の欄にサイトのURLを記入します。
FullCalendarのダウンロード
ダウンロードしたファイルの中から今回は
examplesフォルダの中にある、google-calendar.htmlファイルを使用して行います。
examplesフォルダの中には他にも様々なデザインが予め用意されているので、制作物のデザインに近いものを使用しましょう。
埋め込み
google-calendar.htmlファイルを開いて<head>タグの中の<script>タグにある
googleCalendarApiKeyとeventsの中身を書き換えます。
ここで必要になってくるのが、先程取得したAPIキーとカレンダーIDです。
この２つを下記の様に記述します。
googleCalendarApiKey:'APIキー',
events:'GoogleカレンダーID'すると、下の画像ようなGoogle Calendarと同期されたカレンダーが出来上がります。
上のようなカレンダーが出来上がったら、あとはCSSをカスタマイズして、オリジナルのデザインにするだけです。
CSSはlibフォルダの中にあるmain.cssを書き換えればデザインを変更することができます。
この手順を踏めば、埋め込まれたGoogleカレンダーをカスタマイズすることができるので、是非参考にしてみてください。
