You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.6 KiB
116 lines
2.6 KiB
<html>
|
|
<head>
|
|
<title>Timeline | Item class names</title>
|
|
|
|
<script src="../../dist/vis.js"></script>
|
|
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
|
|
|
<style type="text/css">
|
|
body, input {
|
|
font: 12pt verdana;
|
|
}
|
|
|
|
/* custom styles for individual items, load this after vis.css */
|
|
|
|
.vis.timeline .item.green {
|
|
background-color: greenyellow;
|
|
border-color: green;
|
|
}
|
|
|
|
/* create a custom sized dot at the bottom of the red item */
|
|
.vis.timeline .item.red {
|
|
background-color: red;
|
|
border-color: darkred;
|
|
color: white;
|
|
font-family: monospace;
|
|
box-shadow: 0 0 10px gray;
|
|
}
|
|
.vis.timeline .item.dot.red {
|
|
border-radius: 10px;
|
|
border-width: 10px;
|
|
}
|
|
.vis.timeline .item.line.red {
|
|
border-width: 5px;
|
|
}
|
|
.vis.timeline .item.box.red {
|
|
border-radius: 0;
|
|
border-width: 2px;
|
|
font-size: 24pt;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.vis.timeline .item.orange {
|
|
background-color: gold;
|
|
border-color: orange;
|
|
}
|
|
.vis.timeline .item.orange.selected {
|
|
/* custom colors for selected orange items */
|
|
background-color: orange;
|
|
border-color: orangered;
|
|
}
|
|
|
|
.vis.timeline .item.magenta {
|
|
background-color: magenta;
|
|
border-color: purple;
|
|
color: white;
|
|
}
|
|
|
|
/* our custom classes overrule the styles for selected events,
|
|
so lets define a new style for the selected events */
|
|
.vis.timeline .item.selected {
|
|
background-color: white;
|
|
border-color: black;
|
|
color: black;
|
|
box-shadow: 0 0 10px gray;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<p>This page demonstrates the Timeline with custom css classes for individual items.</p>
|
|
|
|
<div id="mytimeline"></div>
|
|
|
|
<script type="text/javascript">
|
|
// create data
|
|
// note that months are zero-based in the JavaScript Date object
|
|
var data = [
|
|
{
|
|
'start': new Date(2012,7,19),
|
|
'content': 'default'
|
|
},
|
|
{
|
|
'start': new Date(2012,7,23),
|
|
'content': 'green',
|
|
'className': 'green'
|
|
},
|
|
{
|
|
'start': new Date(2012,7,29),
|
|
'content': 'red',
|
|
'className': 'red'
|
|
},
|
|
{
|
|
'start': new Date(2012,7,27),
|
|
'end': new Date(2012,8,1),
|
|
'content': 'orange',
|
|
'className': 'orange'
|
|
},
|
|
{
|
|
'start': new Date(2012,8,2),
|
|
'content': 'magenta',
|
|
'className': 'magenta'
|
|
}
|
|
];
|
|
|
|
// specify options
|
|
var options = {
|
|
editable: true
|
|
};
|
|
|
|
// create the timeline
|
|
var container = document.getElementById('mytimeline');
|
|
timeline = new vis.Timeline(container, data, options);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|