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>;
- Define variables for the data view and strategy.
var dataView;
var timeLinestrategy;
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' }];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>;';
- Specify the JSON file to get data from.
$.getJSON('timeline.json', function(data) {
- 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]);
}
}
- Create a formatter to handle the dates.
var excelFormatter = new GC.Spread.Formatter.GeneralFormatter('mmmm dd');
- Assign the timeline strategy variable.
timeLinestrategy = new GC.Spread.Views.Plugins.TimelineGrouping({});
- 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.
<!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..
MESCIUS inc.