-
Notifications
You must be signed in to change notification settings - Fork 3
/
tasks.timeline.html
executable file
·80 lines (80 loc) · 2.97 KB
/
tasks.timeline.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
<title>Taskwarrior: SIMILE Timeline Widget</title>
<!-- http://simile-widgets.org/wiki/Timeline_GettingStarted -->
<!-- http://simile-widgets.org/wiki/Timeline_EventSources -->
<!-- http://simile-widgets.org/wiki/Timeline_CreatingNewThemes -->
<!-- http://simile-widgets.org/wiki/Timeline_ThemeClass -->
<!-- https://groups.google.com/forum/#!topic/simile-widgets/xn4zA6PwpVg -->
<script type="text/javascript" src="http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js"></script>
<script type="text/javascript">
function onLoad() {
var projectSource = new Timeline.DefaultEventSource();
var eventSource = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.timeline_start = new Date(Date.UTC(2014,3,0,0,0,0,0));
theme.timeline_stop = new Date(Date.UTC(2038,0,19,0,0,0,0));
theme.firstDayOfWeek = 1;
theme.ether.interval.weekend.opacity = 10;
theme.event.duration.impreciseColor = "black";
theme.event.duration.impreciseOpacity = 50;
theme.event.overviewTrack.height = 5;
theme.event.tape.height = 5;
theme.event.track.height = 20;
var bandInfos = [
Timeline.createBandInfo({
eventSource: projectSource,
intervalUnit: Timeline.DateTime.MONTH,
overview: true,
width: "10%",
intervalPixels: 80, // about a year
theme: theme,
}),
Timeline.createBandInfo({
eventSource: projectSource,
intervalUnit: Timeline.DateTime.WEEK,
overview: false,
width: "40%",
intervalPixels: 70, // about a quarter
theme: theme,
}),
Timeline.createBandInfo({
eventSource: eventSource,
intervalUnit: Timeline.DateTime.DAY,
overview: true,
width: "10%",
intervalPixels: 140, // about a week
theme: theme,
}),
Timeline.createBandInfo({
eventSource: eventSource,
intervalUnit: Timeline.DateTime.HOUR,
overview: false,
width: "40%",
intervalPixels: 40, // about a day
theme: theme,
}),
];
bandInfos[0].syncWith = 1; bandInfos[0].highlight = true;
bandInfos[1].syncWith = 2; bandInfos[1].highlight = true;
bandInfos[2].syncWith = 3; bandInfos[2].highlight = true;
timeline = Timeline.create(document.getElementById("timeline"), bandInfos);
Timeline.loadJSON("tasks.timeline.projects.json", function(json,url){projectSource.loadJSON(json,url);});
Timeline.loadJSON("tasks.timeline.json", function(json,url){eventSource.loadJSON(json,url);});
}
</script>
<style>
.timeline-band-0 .timeline-ether-bg{background-color:#d0d0d0}
.timeline-band-1 .timeline-ether-bg{background-color:#e0e0e0}
.timeline-band-2 .timeline-ether-bg{background-color:#d0d0d0}
.timeline-band-3 .timeline-ether-bg{background-color:#e0e0e0}
</style>
</head>
<body onload="onLoad();" onresize="onLoad();">
<noscript>This page requires Javascript.</noscript>
<!-- sizes/ratios configured with these "ideal" settings
<div id="timeline" style="height: 800px; width: 1000px; border: 1px solid gray;"></div>
-->
<div id="timeline" style="height: 100%; width: 100%; border: 1px solid gray;"></div>
</body>
</html>