fullcalendar.js + gcal.jsでGoogle API v3を使ってGoogleカレンダーを表示する

  google API, googleカレンダー, JavaScript, jQuery 

photo credit: photosteve101 via photopin cc

jQueryでGoogleカレンダーを表示させる手段としてfullcalendar.jsをよく利用しています。

これまでGoogle Calendar API v2を使用して表示させていたのですが、
先日の廃止に伴ってGoogle Calendar API v3に対応させる必要があります。

fullcalendar.jsの基本的な使い方

まずはfullcalendar.js一式の最新版(2014.11現在で2.2.2)をダウンロードして読み込ませます。

fullcalendar.js
http://fullcalendar.io/download/

今回必要なファイルを読み込ませます。
(パスは環境に応じて変更してください。)

【header内】

【html】

 実際にカレンダーを読み込む処理はこんな感じ。

 オプション設定でGoogleカレンダーを読み込むための設定をします。

Google Calendar API v3を使用してカレンダーを読み込ませる

これまではカレンダーのfeed URLを指定するだけでした。

 カレンダーのfeed URLはgoogleカレンダーの「設定」→「カレンダー」タブ→各種カレンダーの詳細の
「xml」をクリックすることで取得できます。

Calendar API v3に対応させるにはちょっと記述を変更します。

 ここでgoogle APIを利用するためのAPIキーが必要になります。

Google API v3 を利用しよう!〜APIキーの取得方法〜
http://hamatte-wataru.com/google_api_key/

因みにカレンダーIDは前述の「xml」ボタンの右に表示されています。

これでAPI v3を利用してとりあえずカレンダーの表示ができます!

fullcalendar.jsはオプションがいっぱい

そう、fullcalendar.jsは豊富なオプションが用意されていてかなり詳細なカスタマイズができます。
が、正直多すぎて迷う・・・。

僕は下記ページを参考にオプションを調整しました。
ありがたや、ありがたや。

FullCalendarの日本語化やオプションいろいろ – CodePen
http://codepen.io/iw3/pen/lyhmI/

とはいえやっぱり最後は公式のドキュメントが頼りになります。

http://fullcalendar.io/docs/

これで、使い勝手の良い素敵なカレンダーが設置できる!はず!

最近の物欲!

最近とにかくスーパーロボット、超合金熱が凄くて凄くて。

マジンカイザーかっこいい〜!

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
PAGE TOP ↑