aij[beta]

日々の芥

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) |
Google Data APIの日付処理の続き。

完了したイベントをグレーアウトする処理を、DOMのStylesheetで行うようにした。

API Reference Guide - Google Calendar APIs and Tools - Google Codeをよく読むと
queryのパラメータに、将来のイベントのみというパラメータを発見したので、futureevents=trueを付けてやると今から将来のイベントのみ取得できることがわかった。フォームにチェックボックスを追加して、過去のイベント表示のon/offができるようになった。

あとは、選択した日付のデータをとってくる処理だけど、start-min=yyyy-mm-ddとやればよさそうなので今回は実装しないことにした。さて、そろそろ更新のインターフェースも考えよう。

2008 花火大会カレンダー



スポンサーサイト
Googleカレンダーをjavascriptで操作しながら、Google Data APIのお勉強。
今日は日付の処理。

Common Elements: "Kinds" - Google Data APIs - Google Codeを読むと、gd:whenという要素の属性として、startTimeがあって、xs:dateTimeというタイプとある。日付のフォーマットは、RFC3399にしたがった形式らしい。

サンプルに使用しているスクリプトにstartTimeから月日と、時間を取り出す関数が定義済みだった。

function formatGCalTime(gCalTime) {
// text for regex matches
var remtxt = gCalTime;

function consume(retxt) {
var match = remtxt.match(new RegExp('^' + retxt));
if (match) {
remtxt = remtxt.substring(match[0].length);
return match[0];
}
return '';
}

// minutes of correction between gCalTime and GMT
var totalCorrMins = 0;

var year = consume('\\d{4}');
consume('-?');
var month = consume('\\d{2}');
consume('-?');
var dateMonth = consume('\\d{2}');
var timeOrNot = consume('T');

// if a DATE-TIME was matched in the regex
if (timeOrNot == 'T') {
var hours = consume('\\d{2}');
consume(':?');
var mins = consume('\\d{2}');
consume('(:\\d{2})?(\\.\\d{3})?');
var zuluOrNot = consume('Z');

// if time from server is not already in GMT, calculate offset
if (zuluOrNot != 'Z') {
var corrPlusMinus = consume('[\\+\\-]');
if (corrPlusMinus != '') {
var corrHours = consume('\\d{2}');
consume(':?');
var corrMins = consume('\\d{2}');
totalCorrMins = (corrPlusMinus=='-' ? 1 : -1) *
(Number(corrHours) * 60 +
(corrMins=='' ? 0 : Number(corrMins)));
}
}

// get time since epoch and apply correction, if necessary
// relies upon Date object to convert the GMT time to the local
// timezone
var originalDateEpoch = Date.UTC(year, month - 1, dateMonth, hours, mins);
var gmtDateEpoch = originalDateEpoch + totalCorrMins * 1000 * 60;
var ld = new Date(gmtDateEpoch);

// date is originally in YYYY-MM-DD format
// time is originally in a 24-hour format
// this converts it to MM/DD hh:mm (AM|PM)
dateString = (ld.getMonth() + 1) + '/' + ld.getDate();
timeString = (ld.getHours()) + ':' + ((ld.getMinutes()<10)?('0' + ld.getMinutes()):(ld.getMinutes()));

} else {
// if only a DATE was matched
dateString = parseInt(month) + '/' + parseInt(dateMonth);
}
return dateString;
return timeString

}

この関数に、getTime()で秒換算した値を返すようにする。
中略

dateString = (ld.getMonth() + 1) + '/' + ld.getDate();
timeString = (ld.getHours()) + ':' + ((ld.getMinutes()<10)?('0' + ld.getMinutes()):(ld.getMinutes()));
entryDate = ld.getTime();
} else {
// if only a DATE was matched
dateString = parseInt(month) + '/' + parseInt(dateMonth);
}
return dateString;
return timeString
return entryDateSec
}


今回は今日と比較して、イベントの開始時間が過ぎているかどうかを判断する。

var today = new Date();
var dayPast = (entryDateSec - today.getTime() );

あとは
if (dayPast < 0) を条件式にして、開始時間を過ぎていたら文字をグレーにして、終了の文字を追加してみた。

2008 花火大会カレンダー
今日はそれほど時間がかからずにできた。

なんだか、Google Data APIに行く前に、IEのDOM実装との戦いのようになってきたけれど、今日はTable要素にtbodyが必須だよという話。
IEでのJavascriptのDOM操作に関する備忘録

Google Data APIs Samples - Google Data APIs - Google Codeにあるサンプルで、IEで表示できないなあとおもったら、たいていDOMの話だ。

というわけで、やっとIEでも表示できるサンプルが完成。
2008 花火大会カレンダー -東京-

これでようやくスクリプトをいじれる。




Google Data APIの続き。

といっても、今日はDOMを思いだしてリンクを付け加えたり、Googleマップへクエリーを足したり。どちらかというとjavascriptのお勉強。

2008 花火大会カレンダー -東京-


追記
とりあえずテーブル表示に対応。
2008 花火大会カレンダー -東京-


追記
Iframe表示を削除した。リンク先は、IEでは表示されない。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。