Googleカレンダーの埋め込み
練習や試合のスケジュールは、Googleカレンダー に入れて管理していますが、それを Webサイトに組み込むための方法について記載します。
「1日のタイムスケジュールを見やすく表現すること」が目的でしたので、Googleカレンダーに登録されている内容のうち、「指定する1日分を Webサイトに埋め込んで表示させる方法」ということになります。
早速ですが、本Webサイトで使用している埋め込みカレンダー(1日分のタイムスケジュール)を表示させると、以下のようになります。
上記の 埋め込みスケジューラ のタグの構成は以下の通りです。 これを html に記載することで、Googleカレンダーと連携して、受け取ったデータが ブラウザに表示されます。
<iframe src="https://www.google.com/calendar/embed?title=%E6%B4%9B%E8%A5%BF%E3%82%B5%E3%83%B3%E3%83%9C%E3%83%BC%E3%82%A4%20%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB&mode=day&dates=20140517/20140517&src=rakusai.sunboy%40gmail.com&ctz=Asia/Tokyo" style="border: 0 margin: 0; width:99%; height: 400px; overflow: auto;" frameborder="0" scrolling="no"></iframe>
それぞれの意味は次の通りで、1日分のタイムスケジュールを出すには、mode と dates の指定がポイントとなります。
title= 表示するタイトル行
mode= 表示形式:日表示
dates= 開始日/終了日
src= スケジューラのアカウントとタイムゾーン
style= 幅や高さなど スタイルの指定
おそらくこれ以外にも いろいろなパラメータがあるものと思います。 興味のある方は調べてみてください。