fullcalendar vue

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.css"/>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/de.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app" class="wrapper">
      <div style="padding:30px;text-align:center">
      start: <input type="text" v-model="start0" /><br>
      end: <input type="text" v-model="end0" /><br>
      event: <INPUT v-model="event0" type="text" /><br>
      <button @click="addEvent">Add Event</button>
      </div>
      <calendar ref="calendar" class="cats" @dayclicked="dayclicked" @eventclicked="eventclicked" :events="events" :editable="true">
      </calendar>  
    </div>
    <script src="script.js"></script>
  </body>
</html>


Vue.component('calendar', {
  template: '<div></div>',
  props: {
    events: {
      type: Array, 
      required: true
    },
  },
  data: function() {
    return {
      cal: null
    }
  },  
  watch: {
    events: function(data) {
      this.cal.fullCalendar('refetchEvents');
    }
  },
  mounted: function() {
    var self = this;
    self.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',
      events: function(start, end, timezone, callback) {
        callback(self.events)
      },
      dayClick: function(date) {
        self.$emit('dayclicked', date);
        self.cal.fullCalendar('gotoDate', date.start);
        self.cal.fullCalendar('changeView', 'agendaDay');
      },
      eventClick: function(event) {
	    	self.$emit('eventclicked', event);
	    }
    }    
    this.cal.fullCalendar(args);
  }  
})

function fetchArray(key) {
  if (localStorage.getItem(key))
  {
    return JSON.parse(localStorage.getItem(key));
  }
  return [];
}

function saveArray(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

window.calendar = new Vue({
  el: '#app',
  mounted: function() {
  },
  data: {    
    events: fetchArray("events"),
    start0: "2020-03-22 00:00:00",
    end0: "2020-03-23 00:00:00",
    event0: "test"
  },
  methods: {
    'addEvent': function() {
      this.events.push({
        title: this.event0,
        start: this.start0,
        end: this.end0
      });
      saveArray("events", this.events);
      this.start0 = "";
      this.end0 = "";
      this.evet0 = "";
    },
    'dayclicked': function(date) {
    },
    'eventclicked': function(env) {
    }
  }
})

/* Styles go here */

.wrapper {
  margin: 2rem;
}