ieha * Web Design ieha * Web Design

モバイルで複数のGoogle Calendarまとめて表示する

モバイルサイト制作時、複数カレンダーをひとつのURLにまとめたい事ってありますよね。調べるとこんな方法が…。知りませんでした。
Googleカレンダー携帯で複数のマイカレンダーを見る方法!

自分用に少し整理したのでメモ。

1.Googleにログイン
カレンダー > 設定 > カレンダー設定 > カレンダーのタブ > 任意のカレンダーを選択

2.この部分のコードをコピペ
カレンダー画像

3.必要なカレンダーの分だけ、2を繰り返す。

4.以下のような感じでURLをくっつけます
■2で取得したカレンダーURLたち
[html]/* カレンダーA */ http://www.google.com/calendar/embed?src=カレンダーA%40gmail.com&ctz=Asia/Tokyo

/* カレンダーB */ http://www.google.com/calendar/embed?src=カレンダーB%40group.calendar.google.com&ctz=Asia/Tokyo

/* カレンダーC */ http://www.google.com/calendar/embed?src=カレンダーC%40group.calendar.google.com&ctz=Asia/Tokyo

/* カレンダーD */ http://www.google.com/calendar/embed?src=カレンダーD%40group.calendar.google.com&ctz=Asia/Tokyo[/html]

■結合処理
/* モバイル読み込みベースURL */[html]http://www.google.com/calendar/htmlembed?src=カレンダーA%40gmail.com&ctz=Asia/Tokyo&mode=AGENDA[/html]

/* URL結合前の状態 */[html]http://www.google.com/calendar/htmlembed
?src=カレンダーA%40gmail.com
&src=カレンダーB%40group.calendar.google.com
&src=カレンダーC%40group.calendar.google.com
&src=カレンダーD%40group.calendar.google.com
&ctz=Asia/Tokyo&mode=AGENDA
&mode=AGENDA[/html]

/* 結合URL */
[html]http://www.google.com/calendar/htmlembed?src=カレンダーA%40gmail.com&src=カレンダーB%40group.calendar.google.com&src=カレンダーC%40group.calendar.google.com&src=カレンダーD%40group.calendar.google.com&ctz=Asia/Tokyo&mode=AGENDA[/html]
※&mode=AGENDAはモバイル環境で見やすい一覧表示形式の指定

あとはコレを
[html]<a href="http://www.google.com/calendar/htmlembed?src=カレンダーA%40gmail.com&src=カレンダーB%40group.calendar.google.com&src=カレンダーC%40group.calendar.google.com&src=カレンダーD%40group.calendar.google.com&ctz=Asia/Tokyo&mode=AGENDA" accesskey="1">カレンダー</a>[/html]

みたいな。

しかしこのブログ、めんどくて放置してるけど、段落の上下アキとかやばいよな。きたない。いっそリニューアルしたい。

コメントする

必須 が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※コメントは即時反映されない場合があります。

page top