前提・実現したいこと
Vue + Railsの環境にて、FullCalendarを使ってカレンダーを表示させようとしているのですが、
該当のページにアクセスまたは更新した際、日付部分が空白のままになってしまいます。
前月/次月への移動や週/日単位への表示切替、ブラウザの画面サイズ変更をすることで、
日付が表示されるようになるのですが、何が原因か見当がつきません。。。
直接の解決策でなくても、考え方や原因の切り分け方等ありましたら教えていただけますと幸いです。
発生している問題・エラーメッセージ
カレンダーにアクセスしたり、更新したりすると、日付が表示されな画面が出てきてします。
次の月に移動すると、日付がきちんと表示されます。
また、この状態から元の月に戻った場合も、日付が画面表示されるようになります。
該当のソースコード
calendar.vue
vue
1<template> 2 <div id='vcal'> 3 <FullCalendar 4 class='calendar-app' 5 :defaultView="View" 6 :locale="locale" 7 :header="calendarHeader" 8 :weekends="calendarWeekends" 9 :plugins="calendarPlugins" 10 :events="calendarEvents" 11 @dateClick="handleDateClick" 12 /> 13 </div> 14</template> 15 16<script> 17import FullCalendar from '@fullcalendar/vue' 18import dayGridPlugin from '@fullcalendar/daygrid' 19import timeGridPlugin from '@fullcalendar/timegrid' 20import interactionPlugin from '@fullcalendar/interaction' 21import jaLocale from '@fullcalendar/core/locales/ja' // 日本語化用 22 23export default { 24 name: 'Calendar', 25 components: { 26 FullCalendar // make the <FullCalendar> tag available 27 }, 28 data () { 29 return { 30 View: 'dayGridMonth', 31 locale: jaLocale, // 日本語化 32 // カレンダーヘッダーのデザイン 33 calendarHeader: { 34 left: 'prev,next today', 35 center: 'title', 36 right: 'dayGridMonth,timeGridWeek,timeGridDay' 37 }, 38 calendarWeekends: true, // 土日を表示するか 39 // カレンダーで使用するプラグイン 40 calendarPlugins: [ 41 dayGridPlugin, 42 timeGridPlugin, 43 interactionPlugin 44 ], 45 // カレンダーに表示するスケジュール一覧 46 calendarEvents: [ 47 { 48 title: 'BirthDay', 49 start: '2020-01-31T00:00:00', 50 end : '2020-01-31T23:59:59', 51 } 52 ] 53 } 54 }, 55 methods: { 56 handleDateClick (arg) { 57 if (confirm('新しいスケジュールを' + arg.dateStr + 'に追加しますか ?')) { 58 this.calendarEvents.push({ // add new event data 59 title: '新規スケジュール', 60 start: arg.date, 61 allDay: arg.allDay 62 }) 63 } 64 } 65 } 66} 67</script> 68<style> 69@import '@fullcalendar/core/main.css'; 70@import '@fullcalendar/daygrid/main.css'; 71@import '@fullcalendar/timegrid/main.css'; 72 73.calendar-app { 74 margin: 0 auto; 75 max-width: 1200px; 76 min-height: 1080px; 77} 78 79.fc-sun { 80 color: red; 81 background-color: #fff0f0; 82} 83 84.fc-sat { 85 color: blue; 86 background-color: #f0f0ff; 87} 88 89.fc table { 90 width: 100%; 91} 92 93.fc-time-grid .fc-content-skeleton table { 94 height: 6em; 95 } 96 97</style>
hello_vue.js
js
1import Vue from 'vue' 2import Vcalendar from './app.vue' 3 4document.addEventListener('DOMContentLoaded', () => { 5 const app = new Vue({ 6 render: h => h(Vcalendar) 7 }).$mount() 8 document.body.appendChild(app.$el) 9 10 console.log(app) 11})
app.vue
vue
1<template> 2 <div id='app'> 3 <Calendar /> 4 </div> 5</template> 6 7<script> 8import Calendar from './calendar.vue' 9 10export default { 11 components: { 12 Calendar 13 } 14} 15</script>
index.html.erb
html
1<head> 2<%= javascript_pack_tag 'hello_vue' %> 3</head> 4<body> 5 <div id="app"> 6 <hello></hello> 7 </div> 8</body>
補足情報(FW/ツールのバージョンなど)
Ruby 2.6.5p114
Rails 6.0.2.1
Vue 2.6.11
あなたの回答
tips
プレビュー