Vue.js FullCalendar v5 コンポーネント - イベントが正しく表示されない

Question

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

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

<テンプレート>
    <b-コンテナ流体 @click="logEvents">
        <VueFullCalendar :options="calendarOptions" style="width: 100%; height: 100%;" />
    </b-コンテナ>
</テンプレート>

<スクリプト>
'@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';
</style>

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

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

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

Answer 1

これは日付と時刻の形式が原因です。したがって、一度管理すれば、それが表示されます。

リーリー