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);
const ItemComponent = Vue.extend({
	template: '<p>{{item.content}}</p>',
  props: ['item'],
});

new Vue({
  el: '#app',
  data() {
    return {
      groups: [{
      	id: 0,
        content: 'Group 1'
      }],
      items: [{
      	id: 0,
        group: 0,
        start: new Date(),
        content: 'Item 1'
      }],
      options: {
        editable: true,
        template: (item) => {
        	return new ItemComponent({
          	store: this.$store,
            parent: this,
            propsData: {
            	item,
           	},
        	}).$mount().$el;
        }
      }
    }
  },
});