How to implement a timeline with JavaScript

These two days in busy decorating their department team site, the boss put forward a hope, in the Team site home page to put a timeline, so the department has any new events, agenda, can be displayed on the timeline. This is not particularly troublesome in itself, but our team site is placed in the company's hosting SharePoint system (the company offers SharePoint hosting services that each individual/department can apply to the site in a self-service manner, based on free requirements), The company's hosting system does not allow individual site owners to use any server code (server-side codes). This is also very reasonable from an IT management perspective, but it does greatly limit the ability of users of individual websites to customize their sites. In other words, the tools I can use are the various Web Parts that are built into SharePoint and SharePoint Designer. (In SharePoint 2010, a new feature is provided: Sandboxed Solution to solve this problem, the administrator of each site collection can package to the site collection through upload, deployment features and restricted permissions Solution It does not affect the security and stability of other site collections and the entire server farm. ）

After a few considerations, I am sure that it is possible to implement a timeline with JavaScript and HTML capabilities without allowing server-side code. The following diagram is the result of the final implementation:

This timeline is divided into 3 columns, from the top to the bottom of the day, week, Month view, users can use the mouse to slide each column to view the previous and after the events of the date. Events in timeline, from the data in a list of calendar categories in a Web site, so that a site consumer can only add new events to the list, and the timeline is automatically displayed:

The key to implementation is two points:
1, use JS from the website list, get to the required list item data;
2. Use JS and HTML to render a timeline on a SharePoint page.

First, I use the Calendar list template in my Web site to create a new list. Because on the timeline control, I just want to be able to show events that occurred within 30 days of the day, and to make it easier to get to the event list items around 30 days before and after that day, I created a new view in the list that only shows the event start time is the event that is located around the same day and 30 days. Why create such a view can be convenient for us to use JS on the page to get the desired data, see the back of everyone understand.

To allow this new view to be filtered, I created two new calculation type fields for the list, "30DaysBeforeStartTime" and "30DaysAfterStartTime", and the following figure shows "30DaysBeforeStartTime" Method of Definition: