2015.08.07 

GoogleカレンダーをHPに貼り付けたいが見た目が気に入らなかったのでカスタマイズしたい

Web制作


GoogleCalendarは大変便利ですが、そのままサイト上に貼り付けるとどうも野暮ったい。
そんな時は、jQueryプラグイン「FullCalendar」で見栄えを独自に整えることができます。

例えばこんな感じに↓

今回は、この設定方法をご紹介していきたいと思います。

ちなみに、今記事を書いている時点でのバージョンは2.3.2.です。
(※そういえば、2014年11月にCalendar APIがv3になり、さらにFullCalendarのバージョンも上がったので、使用してる全てのサイトのカレンダーが真っ白になってドキドキしたのを覚えています。)

表示されなくなって困っているという方も再度挑戦してみて下さい。

もくじ
  1. はじめに
  2. 設置
  3. GoogleCalendarを読み込む
    ①APIキーの取得
    ②カレンダーIDの取得
    ③gcal-イベントの入力
  4. カレンダーの追加
  5. スタイルの追加/変更

はじめに

今回は、前提としてGoogleカレンダー内の《マイカレンダー》という機能を使ってスケジュールをカテゴリ分けしている状態とします。
上の画像でいえば「定休日」「月1パーティナイト」ですね。

そしてデフォルトである《他のカレンダー》の「日本の祝日」を表示させていきたいと思います。

マイカレンダーについての設定方法はこちらが詳しいです。
http://www.seshop.com/apps/calendar/04

設置

http://fullcalendar.io/download/ へ行き、 Latest: fullcalendar-2.3.2.zip のリンクをクリックしてダウンロードして下さい。

<head>内に以下を記述して下さい。
※環境によってパスは変更して下さい。
※使わないファイルは削除してしまってOKです。

 

<body>内の設置したい場所に以下を記述して下さい。

GoogleCalendarを読み込む

<head>内に以下を記述して下さい。

これから、①,②,③を埋めて行きましょう。

①APIキーの取得

Apiを利用するプロジェクトを登録するため、Google Developers Consoleにアクセスします。
https://console.developers.google.com/start

上部の[プロジェクトを選択して下さい]から[プロジェクトの作成]をクリックします。

この画面で、英数字で任意のプロジェクト名を入力します。

サイドバーから[API]をクリック。

中央のAPI一覧から[Calendar API]→[APIを有効にする]をクリック。

12

サイドバーから[認証情報]→中央の画面で[新しいキーを作成]→[ブラウザキー]とクリック。

アクセスを許可するのかリファラー(使いたいサイトのURL)を設定します。
※例えば”http://example.com”というサイトで使いたい場合”example.com/*”と入力。
※複数追加することも可能です(“http://example2.com”というサイトでも使用したい場合は画像の様に入力)。

[作成]をクリックすると、この様な情報が表示されます。
これで設定完了です。

表示されている、APIキーをHTML内の①部分に入力します。

②カレンダーIDの取得

ここで一旦、Googleカレンダーに戻ります。
サイドバーのマイカレンダーから[カレンダーの設定]へ。
カレンダーID:の部分をHTML内の②部分に入力します。

[このカレンダーを一般公開する]にチェックを入れておきましょう。

③gcal-イベントの入力

何のカレンダーかを識別するために入力します。(例:定休日)

カレンダーの追加

ここまでで、Googleカレンダーを1種類表示させることが出来たと思います。

(※ちなみに、APIの設定は反映に時間がかかることがあります。作業が済んだら、お茶でも飲んで少しだけ待ちましょう。)

ここからさらにカレンダーを追加していきましょう。

以下のように追加し、今までの要領で②③を埋めてみてください。

スタイルの追加/変更

ここまでで2種類のカレンダーを表示させる事ができました。
次は各カレンダーにスタイルを追加していきます。

こちらのページが大変参考になりました。

■FullCalendarの日本語化やオプションいろいろ – CodePen
http://codepen.io/iw3/pen/lyhmI/
■公式ドキュメント(英語ですが、翻訳し上のページと照らし合わせて見ていけば理解しやすいと思います)
http://fullcalendar.io/docs/

また、土日の色を変更したい場合などは、fullcalendar.css を編集します。

最初のサンプルの完成系はこのようになります。


  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。