JSFiddle - React, Tailwind, and code Playground

by janetyc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<div id="example-timeline"></div>

JavaScript

var container = document.getElementById('example-timeline');

// Create a DataSet with data 
var data = new vis.DataSet([{
    id: 1,
    content: 'First event',
    start: '2014-08-01'
}]);

// Configuration for the Timeline as JSON object
var options = {
    width: '100%',
    editable: true,
    onAdd: function(item, callback) {
        console.log('add: ' + item);
        item.id = 'test';
        callback(item);
    },
    onUpdate: function(item, callback) {
        console.log('add: ' + item);
        callback(item);
    }

};

// Create a Timeline
var timeline = new vis.Timeline(container, data, options);