JavaScript – iDeasilo

先日紹介した Tam-calendar.js の話のなかで、クラスを追加指定する例として祝日の日付に holiday クラスをセットするというのを取り上げましたが、肝心な祝日の日付をどうやって取得すればよいのか、詳しい説明を省いていました。今回はその話をしたいと思います。

Google は Google Calendar のデータを操作できる Google Calendar Data API を公開しています。この API を使うことで Google Calendar 上に保存されたイベントデータを XML フィードとして取得することができます。

各国の休日はイベントの一種として扱われているので、同様に API 経由で取得することが可能です。Google Calendar Data API から祝日のデータを得るメリットとしては、

といった点がまず挙げられますが、さらに重要なポイントとしてクライアントサイドからデータを取得してそのまま処理できるという点も挙げておきたいと思います。

以下、Google Calendar Data API から祝日のデータを取得して Tam-calendar.js に取り込む方法について詳しく解説していきます。

Tam-calendar.js はウェブページにカレンダーを表示する JavaScript です。以下のような特長をそなえています。

カレンダーを table 要素で表現する。個々の日付や曜日などは td 要素であらわす。td 要素が何をあらわしているか、知りたいときは class 属性を見ればわかるようになっている。たとえば「2007年1月1日の日付」なら、<td class="date y2007 m01 d01"> というように。
スタイルシートのセレクタ指定ではこのクラスの組み合わせを使うと便利。たとえば「12月の週末」なら、td.m12.weekend {color: green;} というように。
デフォルトで指定されるクラス以外にも、任意のクラスを追加指定できる。たとえば日本の祝祭日や個人的なイベントの情報と組み合わせるような場合ではとても役に立つ。
テキストの表示はフィルタ関数を指定することによりカスタマイズが可能。日本語と英語の基本的なパターンは定義済みなので(例: “Monday”, “Mon”, “M”, “月”) フィルタを選ぶだけで切り替えられる。
テキストをクリックした際のリンクやアクションの指定などが簡単にできるようになっている。
もちろん、週の始めを日曜にしたり月曜にしたり、簡単に設定できる。

下は Google Calendar 風のスタイルシートを適用したサンプル(スクリーンショット) です。