Full Calendar with Vue 2

Implementing Full calendar widget with Vuejs

by amitavroy

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.0/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  {{ message }}
  <todo></todo>
</div>

JavaScript

Vue.component('todo', {
	template: '<div id="cal">{{check}}</div>',
  data () {
  	return {
    	check: 'test',
      cal: null
    }
  },
  mounted () {
    var self = this
    this.cal = $(self.$el)
    
    var args = {
	    lang: 'en',
      header: {
        left:   'prev,next today',
        center: 'title',
        right:  'month,agendaWeek,agendaDay'
      },
      height: "auto",
      allDaySlot: false,
      slotEventOverlap: false,
      timeFormat: 'HH:mm',
      dayClick (date, event, view) {
      	console.log(date, event, view)
        console.log(date.format())
      }
    }
    
    this.cal.fullCalendar(args)
  }
})
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created () {
  	axios.get("https://demo9140832.mockable.io/calendar-events").then(response => {
    	var data = JSON.parse(response)
    	console.log('response', data)
    })
  }
})