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>

3. Define variables for the data view and strategy.

var dataView;
var timeLinestrategy;

4. 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'
}];

5. 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>';

6. Specify the JSON file to get data from.

$.getJSON('timeline.json', function(data) {

7. 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]);
}
}

8. Create a formatter to handle the dates.

var excelFormatter = new GC.Spread.Formatter.GeneralFormatter('mmmm dd');

9. Assign the timeline strategy variable.

timeLinestrategy = new GC.Spread.Views.Plugins.TimelineGrouping({});

10. 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.

You can download a CTP of Spread.Views here: http://spread.grapecity.com/spreadjs/views/.