|
|
- <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>
-
- <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></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 = new vis.DataSet([
- {
- '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>
|
