如何用JavaScript實現一個Timeline

這兩天在忙著修飾自己部門的Team Site，老闆提出了一個期望，想在Team Site首頁上放一個Timeline，這樣部門有什麼新的事件、議程，都能在Timeline上展現出來。這件事本身並非特別麻煩，但是我們的Team Site是放在公司Hosting的SharePoint系統之中（公司提供SharePoint Hosting服務，每個人/部門可以根據自由要求，以自助的方式申請Site來使用），而公司Hosting的系統，是不允許各個網站的所有者使用任何Server Code（伺服器端代碼）的。從IT管理的角度來說，這也是非常合理的，但這的確大大限制了各個網站的使用者對各自的網站進行定製的能力。換句話說，我能使用的工具，只有SharePoint內建的各個Web Part，以及SharePoint Designer。（在SharePoint 2010中，提供了一個新的特性：Sandboxed Solution，來解決這個問題，各個網站集合的管理員可以通過upload的方式，部署功能與許可權受限的Solution Package到網站集合之中，但又不會影響其他網站集合和整個伺服器陣列的安全與穩定。）

在經過一番考慮之後，我確認在不允許伺服器端代碼的前提下，是可以通過JavaScript和HTML的能力，實現一個Timeline的。下面這張圖是最終實現後的效果：

這個Timeline分成了3欄，從上至下分別是日、周、月視圖，使用者可以使用滑鼠對每個欄進行滑動操作，以查看之前和之後日期的各個事件。Timeline中的事件，來自於網站中一個日曆類別列表中的資料，這樣網站使用者只用在列表中添加新的事件，Timeline中就會自動顯示出來：

實現的關鍵是兩點：
1、使用JS從網站列表中，擷取到所需的清單項目資料；
2、使用JS和HTML，在SharePoint頁面上渲染出Timeline。

首先，我在網站中使用“日曆”列表模板，建立了一個新列表。由於在Timeline控制項上，我只希望能夠顯示當天前後30天之內發生的事件，為了更容易的取到當天前後30天的事件清單項目，我在列表中建立了一個新的視圖，在這個視圖中只顯示事件開始時間是位於當天前後30天的事件。為什麼建立這樣的一個視圖就能方便我們在頁面上用JS擷取想要的資料，看到後面大家就明白了。

為了讓這個新視圖能進行查詢過濾，我為列表建立了兩個新的計算類型欄位，"30DaysBeforeStartTime"和"30DaysAfterStartTime"，下圖顯示了"30DaysBeforeStartTime"的定義方法：