Googleカレンダーの情報を、自サイトに取り込むサンプル
Google Data APIを利用して、最新の予定の一覧だけ取得するサンプルです。
これはjavascriptを利用するものです。
元ネタ:Sample using the Google data JavaScript client library
上記のURLにあるコードをちゃちゃっと使うため、解説を加えて説明します。
- Googleカレンダーのアカウントを作り、公開をする設定にしておきます。ここでの話は、カレンダーが公開されることが前提です。公開したくない情報がある時はやめておきましょう!
- カレンダー IDを控えておきます。***@group.calendar.google.com というものです。
- 上記の元ネタサイトにて、①Retrieve a calendar by calendar address:というフォームに、自分のカレンダーのIDを入れて、Retrieveをクリックしてみましょう。予定が下に表示されましたか?
- ③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>
のスタイルを変更してみましょう。
カレンダーをサイトに張り付けることはできますが、予定が多くなければ、見出しだけで十分!という場合、これを利用するとよいかと思います。