A Timeline layout can make your data easier to follow. This can be particularly useful for milestones in a project or a meeting schedule. Use the following steps to create a timeline that displays a meeting schedule. 1. Add the following references to your page. The gridLayoutEngine reference is used for a basic grid. The timelineStrategy reference is required for a Timeline view.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />;
<script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript">;</script>;
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">;
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript">;</script>;
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript">;</script>;
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.timelinegrouping.10.0.0.css">;
<script src="./plugins/gc.spread.views.timelinegrouping.10.0.0.min.js" type="text/javascript">;</script>;
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript">;</script>;

2. Add any formatting and the height and width for the grid on the page.

<style>;
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.gc-grid {
border: 1px none white;
}
</style>;
</head>;
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;user-select:none;-webkit-user-select: none;">;
<div style="height: 100%; position: relative">;
<div id="gridContainer" style="height:620px;">;
<div id="grid1" style="height:100%;position: relative">;</div>;
</div>;
  1. Define variables for the data view and strategy.
var dataView;
var timeLinestrategy;
  1. Specify the column items from the JSON file.

    var columns = [{
    id: 'topic',
    dataField: 'topic'
    }, {
    id: 'start',
    dataField: 'start',
    format: 'MMMM dd, HH:mmtt'
    }, {
    id: 'end',
    dataField: 'end',
    format: 'HH:mm tt'
    }, {
    id: 'speaker',
    dataField: 'speaker'
    }, {
    id: 'content',
    dataField: 'content'
    }];
    
  2. Create a template.

var groupDetailEventTemplate = '<div style="margin:5px;">;' +
'<div style="font-size:14px;font-weight: bold;">;{{=it.topic}}</div>;' +
'<blockquote style="padding-left: 15px;display: block;font-size:13px;font-family: "Helvetic Neue, Helvetica, Arial">;{{=it.content}}</blockquote>;' +
'<span style="margin-right: auto" >;{{=it.start}}</span>;' +
'</div>;';
  1. Specify the JSON file to get data from.
$.getJSON('timeline.json', function(data) {
  1. Check to see if the start and end dates in the data match.
$.each(data, function(key, val) {
for (var prop in val) {
if (prop === 'start' || prop === 'end') {
val[prop] = new Date(val[prop]);
}
}
  1. Create a formatter to handle the dates.
var excelFormatter = new GC.Spread.Formatter.GeneralFormatter('mmmm dd');
  1. Assign the timeline strategy variable.
timeLinestrategy = new GC.Spread.Views.Plugins.TimelineGrouping({});
  1. Create the data view, specify the group by field, and specify the templates to use for the rows and timeline group.
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new
GC.Spread.Views.Plugins.GridLayout({
grouping: {
field: 'start',
converter: function(field) {
return excelFormatter.format(field);
}
},
autoRowHeight: true,
rowTemplate: groupDetailEventTemplate,
groupStrategy: timeLinestrategy
}));

That is all you need to do to create a Timeline view in Spread.Views. Here is the complete example.

timeline

<!doctype html>;
<html style="height:100%;font-size:14px;">;
<head>;
<meta name="viewport" content="width=device-width, initial-scale=1.0" />;
<script src="./common/gc.spread.common.10.0.0.min.js" type="text/javascript">;</script>;
<link rel="stylesheet" type="text/css" href="./gc.spread.views.dataview.10.0.0.css">;
<script src="./gc.spread.views.dataview.10.0.0.min.js" type="text/javascript">;</script>;
<script src="./plugins/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript">;</script>;
<link rel="stylesheet" type="text/css" href="./plugins/gc.spread.views.timelinegrouping.10.0.0.css">;
<script src="./plugins/gc.spread.views.timelinegrouping.10.0.0.min.js" type="text/javascript">;</script>;
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js" type="text/javascript">;</script>;
<style>;
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.gc-grid {
border: 1px none white;
}
</style>;
</head>;
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;user-select:none;-webkit-user-select: none;">;
<div style="height: 100%; position: relative">;
<div id="gridContainer" style="height:620px;">;
<div id="grid1" style="height:100%;position: relative">;</div>;
</div>;
</div>;
<script type="text/javascript">;
var dataView;
var timeLinestrategy;
var columns = [{
id: 'topic',
dataField: 'topic'
}, {
id: 'start',
dataField: 'start',
format: 'MMMM dd, HH:mmtt'
}, {
id: 'end',
dataField: 'end',
format: 'HH:mm tt'
}, {
id: 'speaker',
dataField: 'speaker'
}, {
id: 'content',
dataField: 'content'
}];
var groupDetailEventTemplate = '<div style="margin:5px;">;' +
'<div style="font-size:14px;font-weight: bold;">;{{=it.topic}}</div>;' +
'<blockquote style="padding-left: 15px;display: block;font-size:13px;font-family: "Helvetic Neue, Helvetica, Arial">;{{=it.content}}</blockquote>;' +
'<span style="margin-right: auto" >;{{=it.start}}</span>;' +
'</div>;';
$(document).ready(function() {
$.getJSON('timeline.json', function(data) {
$.each(data, function(key, val) {
for (var prop in val) {
if (prop === 'start' || prop === 'end') {
val[prop] = new Date(val[prop]);
}
}
});
var excelFormatter = new GC.Spread.Formatter.GeneralFormatter('mmmm dd');
//triangle
timeLinestrategy = new GC.Spread.Views.Plugins.TimelineGrouping({});
dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
grouping: {
field: 'start',
converter: function(field) {
return excelFormatter.format(field);
}
},
autoRowHeight: true,
rowTemplate: groupDetailEventTemplate,
groupStrategy: timeLinestrategy
}));
});
});
</script>;
</body>;
</html>;

You can download the JSON file here: timeline..

Try SpreadJS's Spread.Views components

Download the latest version of SpreadJS

Download Now!