|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Timeline | Edit items</title>
-
- <style type="text/css">
- body, html {
- font-family: sans-serif;
- }
- </style>
-
- <script src="../../dist/vis.js"></script>
- <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <div id="visualization"></div>
- <p></p>
- <div id="log"></div>
-
- <script type="text/javascript">
- // note that months are zero-based in the JavaScript Date object, so month 3 is April
- var items = new vis.DataSet([
- {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
- {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
- {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
- {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
- {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
- {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
- ]);
-
- var container = document.getElementById('visualization');
- var options = {
- editable: true,
-
- onAdd: function (item, callback) {
- item.content = prompt('Enter text content for new item:', item.content);
- if (item.content != null) {
- callback(item); // send back adjusted new item
- }
- else {
- callback(null); // cancel item creation
- }
- },
-
- onMove: function (item, callback) {
- if (confirm('Do you really want to move the item to\n' +
- 'start: ' + item.start + '\n' +
- 'end: ' + item.end + '?')) {
- callback(item); // send back item as confirmation (can be changed
- }
- else {
- callback(null); // cancel editing item
- }
- },
-
- onUpdate: function (item, callback) {
- item.content = prompt('Edit items text:', item.content);
- if (item.content != null) {
- callback(item); // send back adjusted item
- }
- else {
- callback(null); // cancel updating the item
- }
- },
-
- onRemove: function (item, callback) {
- if (confirm('Remove item ' + item.content + '?')) {
- callback(item); // confirm deletion
- }
- else {
- callback(null); // cancel deletion
- }
- }
- };
- var timeline = new vis.Timeline(container, items, options);
-
- items.on('*', function (event, properties) {
- logEvent(event, properties);
- });
-
- function logEvent(event, properties) {
- var log = document.getElementById('log');
- var msg = document.createElement('div');
- msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
- 'properties=' + JSON.stringify(properties);
- log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
- }
-
- </script>
- </body>
- </html>
|
