jQueryでGoogleカレンダーの予定を取得して自分のサイトに表示する

Posted: 2011.04.18 / Category: javascript / Tag: API, jQuery, json

クライアント側でイベント情報などの予定をWeb上にのせたいとき、一からシステムを開発する他、最近ではGoogleカレンダーを自サイトに埋め込むという方法もありますね。
でもそれだとデザイン的にあれだよね。ということでjQueryを使用してお手軽にGoogleカレンダー予定を時系列順に表示する方法をご紹介します。

Googleカレンダーの設定

Googleカレンダーは初期設定だと自分しか見られない状態ですので、サイトに表示するためには設定を変更する必要があります。
Googleカレンダーにログインしたら左メニューから「アカウント名@gmail.com」の右の三角アイコンをクリックして、サブメニューから「カレンダー設定」を選択します。

Googleカレンダーの設定ボタンの場所

設定画面で「このカレンダーを共有」タブを選択して「このカレンダーを一般公開する」にチェックします。

Googleカレンダーの一般公開チェックボックスの場所

これでGoogleカレンダー側の設定は完了です。

ちなみに「カレンダーの情報」タブの「このカレンダーを埋め込む」にあるコードを貼り付ければ、そのままの形でGoogleカレンダーをサイトに埋め込むことができます。

URLを確認する

以下のURLにアクセスするとカレンダーに入力した情報をfeedで取得できます。

http://www.google.com/calendar/feeds/アカウント名@gmail.com/public/basic

このままだと過去のデータがあったり、xml形式だったりで扱いにくいのでURLに値を指定して、使いやすい形にします。
以下の値を指定するといい感じになるかも。

alt	取得フォーマットの指定「json-in-script」でjson形式
orderby	ソートするプロパティの指定。「starttime」で開始時間順にソート
sortorder	ソートの方向指定。ascendで昇順、descendで降順
max-results	取得件数の指定。数値で指定
futureevents	「true」で未来の予定だけ取得

その他は公式ドキュメントを参照ください。

Data API Atom Reference

これをすべて指定すると下記のようになります。

http://www.google.com/calendar/feeds/アカウント名@gmail.com/public/basic?alt=json-in-script&orderby=starttime&sortorder=ascend&max-results=10&futureevents=true

jQueryでデータを取得して表示

ここまできたらあとはgetJSONとかで取得します。

html

 
		<div id="view"></div>

javascript

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$.getJSON('https://www.google.com/calendar/feeds/アカウント名@gmail.com/public/basic?alt=json-in-script&orderby=starttime&sortorder=ascend&max-results=10&futureevents=true&callback=?', function (json) {
			var items = json.feed.entry;
			$.each(items,function(i){
				$('#view').append('<div>'+
				'<h3>タイトル: '+ this.title.$t + '</h3>'+
				'<p>'+ items[i].content.$t + '</p>'+
				'</div>');
			});
		});
	});
</script>

COMMENTS

Nyamo　2012-01-20 16:04　

参考にさせていただきました。

1つ質問があります。
説明では、Googleカレンダーから情報を取得する際、
「futureevents」をtrueにし、未来の情報だけを取得されています。

私は、今月と来月の予定の情報を取得したいのですが、
そのような設定は可能でしょうか？
Calendar query parameters referenceを参考にしても、
そのような設定は載っていないように思ったので、質問させていただきました。

webOpixel　2012-01-23 17:05　

パラメータに「start-min=2012-01-01&start-max=2012-03-01」と指定すれば1月と2月の情報が取得できますので、これとdateメソッドなどを絡めてできませんでしょうか。
もっとスマートなやり方はありそうですが、、、

suzuki　2012-08-03 17:51　

仕事で全く同じことを実装することになり、大変参考になりました。
ありがとうございました。

Ryuichiro　2012-09-25 11:12　

お忙しいところ、申し訳ありませんが、質問をさせていただきます。
さて、グーグルカレンダーのリンクを取得したく、getHtmlLink().getHref()を使いたいのですが、どのようにすればよろしいでしょうか。
よろしく、ご教示お願いします。

webOpixel　2012-09-28 16:58　

getHtmlLink().getHref()といのがちょっとわからないのですが、リンクなら
items[i].link[0].href
でできませんか。

Ryuichiro　2012-10-02 08:34　

リンクについてのご教示、ありがとうございます。
ご指示の通りitems[i].link[0].hrefで、リンクを取得できました。

javascriptの11行目を、下記のようにしましたら、タイトルにgoogleカレンダーへのリンクが設定できました。

‘タイトル: ‘+ items[i].title.$t + ‘‘+

重ねて、感謝します。

Ryuichiro　2012-10-02 08:38　

リンクについてのご教示、ありがとうございます。
ご指示の通りitems[i].link[0].hrefで、リンクを取得できました。

javascriptの11行目を、下記のようにしましたら、タイトルにgoogleカレンダーへのリンクが設定できました。

「’タイトル:‘+items[i].title.$t+’‘+」

重ねて、感謝します。
投稿にhtmlがうまく表示できないようなので、再度。

kisane　2012-10-16 12:14　

大変参考になりました。

1つ教えて頂きたいのですが、よろしいでしょうか。
地図リンクを取得したいのですが、どうやったらよいのかわかりません。
方法があったら教えて頂きたいです。

Azuma　2013-04-22 02:21　

Googleカレンダーの各項目を好みの装飾でリスト表示する方法を探していたところ、こちらのエントリーにたどり着きました。
わかりやすい解説でとても参考になりました！

もしよろしければ、説明の項目（feed.entry.content.$t）での改行が反映された表示にするためのコードも教えて頂けると嬉しいです。

webOpixel　2013-04-24 13:26　

改行を置き換えるというてもありますが、preにすれば簡単かもしれません。

Azuma　2013-04-26 14:26　

わざわざのご返答、ありがとうございました！
早速試してみます！

Azuma　2013-04-28 04:12　

教えて頂いた内容で、拍子抜けするぐらい簡単に改行が反映された状態になりました。
丸２日ほど、ここの箇所だけで詰まってたのが嘘みたいです。

改めて、ありがとうございました！

xiao　2013-05-09 09:27　

参考にさせて頂いております。
私知識不足か何度やってもうまく表示する事が出来ません。
function formatT・・・・などの記述は
の上に表示させればいいのでしょうか？
グーグルマップなどは表示させることが出来たのですが、どうしてもうまくいきません。
もしよろしければ全体像のソースなど表示して頂けると嬉しいです。
お手数おかけしますが、ご教授よろしくお願いします。

xiao　2013-05-09 09:28　

訂正です。

function formatT・・・・などの記述は

ヘッダーの上に表示させればいいのでしょうか？

webOpixel　2013-05-09 10:52　

一番下のコードの

function formatTime(str, format) {
…….
}

の部分に入れてください。

xiao　2013-05-09 15:56　

ありがとうございます。
何度やってもダメだったものが、ものの数秒で表示されました！！！
ありがとうございます！

xiao　2013-05-09 20:51　

質問ばかりで申し訳ありませんが、futureeventsをfalseにすることで過去のものも表示できるのですが、当日をふくめた未来を表示することは出来るのでしょうか。過去を表示するとどこまでもさかのぼってしまうので。

xiao　2013-05-10 07:43　

すみません。今朝試したところ当日も表示されました。
なぜ昨日は表示されなかったんだろう・・・。
ご迷惑をおかけしました。

xiao　2013-05-10 08:01　

すみません・・。
feed.entryでは開始時間と終了時間が指定されていますが、
終日の予定を指定することは出来ますでしょうか。

fuga　2014-06-14 14:09　

参考にさせていただいております。

現在掲載されているデータ取得方法は、Googleアカウントで登録されたものですが
Googleアカウント配下で（カテゴリ機能として）カレンダーを新規作成した場合、
それらを取得する事は可能でしょうか。

お忙しいところ申し訳ありませんが、ご回答いただければ嬉しいです。

eyely　2014-12-09 14:36　

同じように使わせてもらってたのですが、
現在は取得できなくなってます。
GoogleカレンダーAPIの仕様変更したみたいですね。

webOpixel　2014-12-14 17:34　

はい。仕様変更があったみたいですので修正しました。
とりあえずURLの下記のようにすれば取得できるようです。
public/full　> public/basic
が、基本的には取得できる内容など変更されているようです。