JSFiddle - React, Tailwind, and code Playground

by Sagar Bendale

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.4.0/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.4.0/vis.min.js"></script>
<div id="visualization"></div>
<button type="button" onclick="limitedZoom()">Limit on Date</button>
<button type="button" onclick="basic()">Basic</button>

JavaScript

function limitedZoom() { // create some items
    // note that months are zero-based in the JavaScript Date object, so month 4 is May

    var items = new vis.DataSet([{
        start: new Date(2012, 4, 24),
        content: 'item 1'
    }, {
        start: new Date(2012, 4, 25),
        content: 'First'
    }, {
        start: new Date(2012, 4, 26),
        content: 'Last'
    }]);

    // create visualization
    document.getElementById('visualization').innerHTML = "";
    var container = document.getElementById('visualization');
    var options = {
        height: '300px',
        min: new Date(2010, 0, 1), // lower limit of visible range
        max: new Date(2016, 0, 1), // upper limit of visible range
        zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
        zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
    };

    // create the timeline
    var timeline = new vis.Timeline(container);
    timeline.setOptions(options);
    timeline.setItems(items);
}

function basic() {
    document.getElementById('visualization').innerHTML = "";
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([{
        id: 1,
        content: 'item 1',
        start: '2013-04-20'
    }, {
        id: 2,
        content: 'item 2',
        start: '2013-04-14'
    }, {
        id: 3,
        content: 'item 3',
        start: '2013-04-18'
    }, {
        id: 4,
        content: 'item 4',
        start: '2013-04-16',
        end: '2013-04-19'
    }, {
        id: 5,
        content: 'item 5',
        start: '2013-04-25'
    }, {
        id: 6,
        content: 'item 6',
        start: '2013-04-27'
    }]);

    // Configuration for the Timeline
    var options = {};

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