Google Data APIサンプル カレンダーの情報を取得するJavascript

Javascript

Googleカレンダーの情報を、自サイトに取り込むサンプル

Google Data APIを利用して、最新の予定の一覧だけ取得するサンプルです。
これはjavascriptを利用するものです。

元ネタ:Sample using the Google data JavaScript client library

http://gdata-javascript-client.googlecode.com/svn/trunk/samples/calendar/simple_sample/simple_sample.html

上記のURLにあるコードをちゃちゃっと使うため、解説を加えて説明します。

  1. Googleカレンダーのアカウントを作り、公開をする設定にしておきます。ここでの話は、カレンダーが公開されることが前提です。公開したくない情報がある時はやめておきましょう!
  2. カレンダー IDを控えておきます。***@group.calendar.google.com というものです。
  3. 上記の元ネタサイトにて、①Retrieve a calendar by calendar address:というフォームに、自分のカレンダーのIDを入れて、Retrieveをクリックしてみましょう。予定が下に表示されましたか?
  4. ③Copy and Paste to your site:にあるコードを若干手直ししながら自分のサイトに貼り付けます。
 1行目 <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_KEY_HERE"></script>
 の?key=YOUR_KEY_HEREを消去
 
 18行目 loadCalendarByAddress('developer-calendar@google.com');
 の、developer-calendar@google.comを自分のカレンダーのIDに変更します。
 最後から2行目
 loadCalendar('http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full');
 のdeveloper-calendar@google.comが、自分のカレンダーのIDになっているか確認します。

以上で終了です。
できましたか?

なお、表示される予定のフォントやカラーを変えたい場合は、上記のスクリプト中の

 <div id="calendarTitle"></div>
 <div id="events"></div>

のスタイルを変更してみましょう。

カレンダーをサイトに張り付けることはできますが、予定が多くなければ、見出しだけで十分!という場合、これを利用するとよいかと思います。

その他参考リンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です