如何用JavaScript实现一个Timeline

如何用JavaScript实现一个Timeline2013-10-14这两天在忙着修饰自己部门的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"的定义方法：