JSFiddle - React, Tailwind, and code Playground

by alexkodo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
<script src="https://unpkg.com/vue2vis@0.0.8/dist/vue2vis.min.js"></script>
<body>
  <div id="app">
    <timeline ref="timeline" :items="items" :groups="groups" :options="options">
    </timeline>
  </div>
</body>

JavaScript

Vue.component('timeline', vue2vis.Timeline);

new Vue({
  el: '#app',
  data() {
    return {
      groups: [],
      items: [],
      options: {
        editable: true,
      }
    }
  },
  created() {
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var groupCount = 3;
    var itemCount = 20;
    // create a data set with groups
    var names = ['John', 'Alston', 'Lee', 'Grant'];
    for (var g = 0; g < groupCount; g++) {
      this.groups.push({
        id: g,
        content: names[g]
      });
    }
    // create a dataset with items
    for (var i = 0; i < itemCount; i++) {
      var start = now.clone().add(Math.random() * 200, 'hours');
      var group = Math.floor(Math.random() * groupCount);
      this.items.push({
        id: i,
        group: group,
        content: 'item ' + i +
          ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
        start: start,
        type: 'box'
      });
    }
  }
});