Google Calendar 的 JSON 應用

新版的 blogger.com 有個 HTML/Javascript 的 widget 區塊，可以很自由的放入一些程式碼，目前 google 宣佈全面支援 JSON 的規格，因此不用再利用 XMLRequest 的元件去解惱人的 XML 格式。

目前 blogger.com 的新版範本檢查的很嚴格，很多要寫死的資料並不建議直接放在範本上，利用 HTML/Javascript 這個 widget 也是放置資料的好方法。

JSON 的規格大致上就是利用Javascript src=http://domain.../?param=value 這種模式，用瀏覽器的內建解析HTML語法的同時就把程式碼下載到Client端，然後透過 Callback function 的宣告，只要下載回來就會觸發相關的function，資料利用 Array 的模式直接放在裡面，很簡單的取出資料然後做相關的應用顯示出來即可，要取多少資料，要如何排序，要怎樣顯示？都可以自己決定。

以下就是我利用 Google Calendar 提供的 feed，把最近三筆在日曆上的行程顯示出來，如何判斷最近？就是利用客戶端電腦的日期時間來判斷，然後依照時間排序顯示出這些資訊。程式碼如下：

<h2><a target="_blank" href="http://www.google.com/calendar/embed?src=mpmigkt2int30a57lakat0dn10%40group.calendar.google.com">《活動行程》</a><a target="_blank" href="http://www.google.com/calendar/feeds/mpmigkt2int30a57lakat0dn10%40group.calendar.google.com/public/full"><img border="0" src="http://www.google.com/calendar/images/xml.gif"/></a></h2>
<div id="divcalendar">下載中...</div>
<script>
function cal_Date(a){
  var aa=a;
  if (aa.length==10)
     aa += 'T00:01:00.000+08:00';
  return Date.parse(aa.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
}
function cal_comp(a,b){
  order= cal_Date(a.gd$when[0].startTime)- cal_Date(b.gd$when[0].startTime);
  return order;
}
function cbcalendar(json) 
{
    var temp = '<ul id="feedItemListDisplay">';
    var postshow=3;
    var sortentry=json.feed.entry.sort(cal_comp);
    var nowDate= new Date();
    var j=0;
    for (var i=0,post; post = sortentry[i]; i++) {    
        if(j>=postshow) break;
        var title=post.title.$t;
        var link=post.gd$where[0].valueString;
        var startTime=post.gd$when[0].startTime;
        var thisDate = cal_Date(startTime);
        if (thisDate >= nowDate)
        {
           temp += '<li><a target="_blank" href="' + link + '">' + startTime.substring(0,10)+'：'+title + '</a><br>' +'</li>';
           j ++;
        }
      }
    if (j==0)
      temp += "<li>無資料</li>";
    temp+="</ul>";
    document.getElementById("divcalendar").innerHTML = temp;
}
</script>
<script src="http://www.google.com/calendar/feeds/mpmigkt2int30a57lakat0dn10%40group.calendar.google.com/public/full?alt=json-in-script&callback=cbcalendar" type="text/javascript"></script>

由於 google calendar 並沒有網址URL 的欄位，我是利用地點這個欄位來放網址，上面有行程式碼

var link=post.gd$where[0].valueString;

可以改成

var link=post.link[0].href;

就是 google calendar 那個行程的連結。

相關說明：http://code.google.com/apis/gdata/json.html