JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css">
<script src="https://visjs.github.io/vis-timeline/docs/js/jquery.min.js"></script>
<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<h1>Timeline visible Groups</h1>

<button onclick="showVisibleGroups()">Show current visible items</button>
<div>
  <h2>visible groups:</h2>
  <h3 id="visibleGroupsContainer"></h3>
  <h2>
    (Scroll with the mouse and see the items being focus automatically on the
    timeline)
  </h2>
</div>

<div id="visualization"></div>
<br />

CSS

body {
  color: #4d4d4d;
  font: 10pt arial;
}

JavaScript

function showVisibleGroups() {
  var a = timeline.getVisibleGroups();
  document.getElementById("visibleGroupsContainer").innerHTML = "";
  document.getElementById("visibleGroupsContainer").innerHTML += a;
}

var now = Date.now();

var options = {
  stack: false,
  maxHeight: 640,
  horizontalScroll: true,
  verticalScroll: true,
  zoomKey: "ctrlKey",
  start: Date.now() - 1000 * 60 * 60 * 24 * 3, // minus 3 days
  end: Date.now() + 1000 * 60 * 60 * 24 * 21, // plus 1 months aprox.
  orientation: {
    axis: "both",
    item: "top",
  },
};
/* 
var groups = new vis.DataSet();
var items = new vis.DataSet(); 
*/

console.log(groups);

var groups = new vis.DataSet([
  {id: 1, content: 'Job 1', order: 1},
  {id: 2, content: 'Job 2', order: 2},
  {id: 3, content: 'Job 3', order: 3},
  {id: 4, content: 'Job 4', order: 4},
  {id: 5, content: 'Job 5', order: 5},
  {id: 6, content: 'Job 6', order: 6}
]);

var items = new vis.DataSet([
  {id: 1, group: 1, content: 'Item 1', start: '2021-11-20', end: '2021-11-24', type: 'range'},
  {id: 2, group: 2, content: 'Item 2', start: '2021-11-22', end: '2021-11-26', type: 'range'},
  {id: 3, group: 3, content: 'Item 3', start: '2021-11-24', end: '2021-11-28', type: 'range'},
  {id: 4, group: 4, content: 'Item 4', start: '2021-11-26', end: '2021-11-30', type: 'range'},
  {id: 5, group: 5, content: 'Item 5', start: '2021-11-28', end: '2021-12-02', type: 'range'},
  {id: 6, group: 6, content: 'Item 6', start: '2021-11-30', end: '2021-12-04', type: 'range'},
  {id: 7, group: 1, content: 'Item 1', start: '2021-11-22', end: '2021-11-26', type: 'range'},
]);

/* 
var count = 300;

for (var i = 0; i < count; i++) {
  var start = now + 1000 * 60 * 60 * 24 * (i + Math.floor(Math.random() * 7));
  var end = start + 1000 * 60 * 60 * 24 * (1 + Math.floor(Math.random() * 5));

  groups.add({
    id: i,
    content: "Task " + i,
    order: i,
  });

  items.add({
    id: i,
    group: i,
    start: start,
    end: end,
    type: "range",
   ...