Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
74 lines (68 sloc) 2.26 KB
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='../vendor/jquery/jquery.min.js'></script>
<script type='text/javascript' src='../vendor/moment/moment.js'></script>
<script type='text/javascript' src='../vendor/twix/bin/twix.js'></script>
<script type='text/javascript' src='../files/timestack.js'></script>
<link rel='stylesheet' type='text/css' href='../files/timestack.css'/>
<style>
body {
background-color: #f7f7f7;
}
</style>
<script>
$(function(){
$('#timeline').timestack({
span: 'hour',
click: function(data){
$('#title').text(data.title);
$('#dates').text(data.timeDisplay);
$('#content').empty().append(data.content);
},
renderDates: function(item){
return moment(item.start).twix(item.end).format({showDate: false})
},
data: [
{
start: '2012-08-26T09:00',
end: '2012-08-26T17:00',
title: 'Bob OOO',
content: "<p>He's in the Bahamas or something.</p> <h2>Lucky bastard.</h2>",
color: 'rgb(149, 203, 255)'
},
{
start: '2012-08-26T09:00',
end: '2012-08-26T10:00',
title: 'Meeting',
color: 'rgb(255, 149, 192)'
},
{
start: '2012-08-26T12:00',
end: '2012-08-26T13:00',
title: 'Lunch',
content: "<p>Nom nom at <a href='http://www.cloverfoodlab.com/'>Clover</a>.</p>",
color: 'rgb(151, 255, 177)'
},
{
start: '2012-08-26T12:30',
end: '2012-08-26T15:30',
title: 'Code review',
content: "<p>Gotta find out if everyone is happy with this timeline component.<p>",
color: 'rgb(255, 149, 192)'
}
]
});
});
</script>
</head>
<body>
<h3>Similar to <a href="simple.html">the simple example</a>, but notice the more subtle formatting of the time ranges.</h3>
<div id='timeline'></div>
<div id='display'>
<h1 id='title'></h1>
<h3 id='dates'></h3>
<div id='content'/>
</div>
</body>
</html>