<!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"> var items = new vis.DataSet(); items.add([ {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>