forked from Techsystech/web
100 lines
3.5 KiB
HTML
100 lines
3.5 KiB
HTML
<!--
|
|
http://code.google.com/apis/gdata/samples/cal_sample.html
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<title>Timeline demo</title>
|
|
|
|
<style type="text/css">
|
|
body {font: 10pt arial;}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
|
<script type="text/javascript" src="../timeline.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
|
|
|
<script type="text/javascript">
|
|
var cal;
|
|
|
|
// load the google calendar feed
|
|
function insertAgenda(calendar) {
|
|
cal = calendar;
|
|
}
|
|
</script>
|
|
|
|
<script type="text/javascript" src="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&callback=insertAgenda&orderby=starttime&max-results=20&singleevents=true&sortorder=ascending&futureevents=true"></script>
|
|
|
|
<script type="text/javascript">
|
|
var timeline;
|
|
|
|
google.load("visualization", "1");
|
|
|
|
// Set callback to run when API is loaded
|
|
google.setOnLoadCallback(drawVisualization);
|
|
|
|
/**
|
|
* Parse a date like "2010-10-07T17:00:00.000-07:00" or "2010-10-07"
|
|
* @param {string} googledate
|
|
* @return {Date}
|
|
*/
|
|
function parseGoogleDate(googledate) {
|
|
var year = parseInt(googledate.substr(0,4), 10);
|
|
var month = parseInt(googledate.substr(5,2), 10) - 1;
|
|
var date = parseInt(googledate.substr(8,2), 10);
|
|
var dateObj;
|
|
|
|
if (googledate.length <= 10) {
|
|
dateObj = new Date(year, month, date);
|
|
} else {
|
|
var hour = parseInt(googledate.substr(11,2), 10) - parseInt(googledate.substr(25,2), 10);
|
|
var minute = parseInt(googledate.substr(14,2), 10) - parseInt(googledate.substr(28,2), 10);
|
|
var second = parseInt(googledate.substr(17,2), 10);
|
|
|
|
dateObj = new Date(year, month, date, hour, minute, second);
|
|
dateObj.setMinutes(dateObj.getMinutes() - dateObj.getTimezoneOffset());
|
|
}
|
|
return dateObj;
|
|
}
|
|
|
|
// Called when the Visualization API is loaded.
|
|
function drawVisualization() {
|
|
// Create and populate a data table.
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('datetime', 'start');
|
|
data.addColumn('datetime', 'end');
|
|
data.addColumn('string', 'content');
|
|
|
|
for (i = 0; i < cal.feed.entry.length; i++) {
|
|
var start = parseGoogleDate(cal.feed.entry[i].gd$when[0].startTime);
|
|
var end = parseGoogleDate(cal.feed.entry[i].gd$when[0].endTime);
|
|
var title = cal.feed.entry[i].title.$t;
|
|
var content = cal.feed.entry[i].content.$t;
|
|
var href = cal.feed.entry[i].link[0].href;
|
|
|
|
var eventcontent = "<a href='" + href + "'>" + title + "</a>";
|
|
data.addRow([start, undefined, eventcontent]);
|
|
}
|
|
|
|
// specify options
|
|
var options = {
|
|
'width': "100%",
|
|
'height': "auto",
|
|
'style': "dot"
|
|
};
|
|
|
|
// Instantiate our timeline object.
|
|
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
|
|
|
// Draw our timeline with the created data and options
|
|
timeline.draw(data);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Google upcoming events</h1>
|
|
<div id="mytimeline"></div>
|
|
</body>
|
|
</html>
|