JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/FranckFreiburger/u-require/master/src/uRequire.js"></script>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://rawgit.com/FranckFreiburger/http-vue-loader/master/src/httpVueLoader.js"></script>
<script src="https://cdn.rawgit.com/date-fns/date-fns/v1.28.5/dist/date_fns.min.js"></script>
<script type="x-template" id="main">
	<div>
		<calendar-range locale="EN" :selection="selection" :events="calendarEvents"></calendar-range>
    <button @click="add">add</button>
  </div>
</script>

<div id="app"></div>

CSS

.calendar {
    border: 2px solid #000;
    border-radius: 0.5em;
    padding: 0.5em;
}

JavaScript

/* required for testing with jsfiddle.net [[ */
httpVueLoader.require = require;
require.extensions['.vue'] = function(module, url) {
	module.exports = httpVueLoader.load(url);
}
require.cache['date-fns'] = dateFns;
require.cache['date-fns/locale/en/index.js'] = require('https://raw.githubusercontent.com/date-fns/date-fns/v1.28.5/src/locale/en/index.js');
var baseUrl = 'https://raw.githubusercontent.com/FranckFreiburger/vue-calendar-picker/v1.2.1/src/';
/* ]] */

new Vue({
	el: '#app',
  components: {
  	calendarRange: require(baseUrl+'calendarRange.vue'),
  },
  data: {
	  selection: { start: Date.now(), end: Date.now() },
    calendarEvents: []
  },
  methods: {
  	add: function() {
    	this.calendarEvents.push({
      	color: '#'+Math.floor(Math.random()*16777215).toString(16),
        start: this.selection.start,
        end: this.selection.end
      });
    }
  },
	template:'#main'
});