Vue vue-fullcalender

by kabanoki

HTML

<div id="app">
  <h2>■カレンダーページ■</h2> 
  <div class="calender-area">
    <script type="text/x-template" id="calender">
      <fullCalendar 
        @dateClick="handleDateClick"
        ref="fullCalendar"
        default-view="dayGridMonth" 
        :plugins="calendarPlugins" 
        :locale="'ja'" 
        :events="events" 
        :header="header"
        :buttonText="buttonText"
        :customButtons="customButtons"
      />
    </script>
    <calender />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.css" rel='stylesheet'>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.css" rel='stylesheet'>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.umd.min.js"></script>

CSS

h2 {
  font-size: 300%;
  text-align:center;
}
.calender-area{
  width: 90%;
  margin: auto;
}

Vue

var today = new Date();
var day1 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+1);
var day2 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+2);
var day3 = new Date(today.getFullYear(), today.getMonth(), today.getDate()+3);

const dayGridPlugin = window.FullCalendarDayGrid.default;
const FullCalendarInteraction = window.FullCalendarInteraction.default;

Vue.component('calender', {
  template: '#calender',
  data: function() {
    return {
      calendarPlugins: [ 
        dayGridPlugin, 
        FullCalendarInteraction 
      ],
      events: [
        { title: 'event 1', date: day1 },
        { title: 'event 2', date: day2 }
      ],
      header:{
        left:   'title',
        center: 'addPostButton',
        right:  'today prev,next'
      },
      buttonText: {
        today: '今日'
      },
      customButtons: {
        addPostButton: {
          text: '追加!',
          click: function() {
            app.$children[0].events.push({
              title: 'event 3', 
              date: day3
            });
          }
        }
      },
    }
  },
  methods: {
      handleDateClick: function(info) {
        alert('click day :' + info.dateStr);
      }
  }
});

let app = new Vue({
  el: '#app',
});