最近、Vue.js プロジェクトの FullCalendar コンポーネントをバージョン 4.4.2 からバージョン 5.9.0 にアップグレードしました。ただし、イベントが表示されないという問題が発生しました。元のファイルでは原因が見つからなかったので、エラーが見つかることを期待して、完全に新しいファイルでカレンダーの構築を開始することにしました。カレンダーを段階的に構築していきました。しかし、この新しいファイルでもイベントを表示できず、現時点では何が間違っているのか全くわかりません。コンソールにはイベントの配列が表示されますが、カレンダーには表示できません。

コードは次のとおりです:

<テンプレート>     <スクリプト> '@fullcalendar/vue' から VueFullCalendar をインポートします resourceTimeGrid を「@fullcalendar/resource-timegrid」からインポートします '@fullcalendar/daygrid' から dayGridPlugin をインポートします 「@fullcalendar/timegrid」から timeGridPlugin をインポートします '@fullcalendar/interaction' から interactionPlugin をインポートします listPlugin を「@fullcalendar/list」からインポートします デフォルトのエクスポート { コンポーネント: { Vueフルカレンダー }、 名前: 'カレンダー'、 データ: 関数 () { 戻る { カレンダーオプション: { プラグイン: [dayGridPlugin、timeGridPlugin、interactionPlugin、resourceTimeGrid、listPlugin]、 ヘッダーツールバー: { 左: '今日の前、次'、 中央: 'タイトル'、 右: 'dayGridMonth、resourceTimeGridWeek、resourceTimeGridDay' }、 初期ビュー: 'resourceTimeGridWeek', スロット最小時間: '09:00:00', スロット最大時間: '21:30:00', allDaySlot: false、 イベント: [ { タイトル: 「イベント 2」、 開始: '2021-09-28T09:00', 終了: '2021-09-28T10:30' }、 { タイトル: 「イベント 1」、 開始: '2021-09-28T11:00', 終了: '2021-09-28T13:00' } ] } } }、 メソッド: { logEvents () { console.log(this.calendarOptions.events) } } } 
      <スタイル>
       @import '~@fullcalendar/list/main.min.css'; 

何か悪いことをしましたか?

ご協力いただき誠にありがとうございます。

ご多幸をお祈り申し上げます。