Блог

Недавно мы обновили наш компонент FullCalendar в нашей Vue.js проект с версии 4.4.2 до версии 5.9.0. Однако у нас есть проблемы с отображением событий. Поскольку я не смог найти причину этого в нашем исходном файле, я решил начать создавать календарь в совершенно новом файле, создавать календарь шаг за шагом, чтобы, надеюсь, найти ошибку. Однако даже в этом новом файле я не могу отобразить события, и на данный момент я совершенно не понимаю, что я делаю не так. В консоли я вижу множество событий, но не могу заставить их отображаться в календаре.

Вот код:

 <template>
    <b-container fluid @click="logEvents">
        <VueFullCalendar :options="calendarOptions" style="width: 100%; height: 100%;" />
    </b-container>
</template>

<script>
import VueFullCalendar from '@fullcalendar/vue'
import resourceTimeGrid from '@fullcalendar/resource-timegrid'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'

export default {
  components: {
    VueFullCalendar
  },
  name: 'Calendar',
  data: function () {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimeGrid, listPlugin],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,resourceTimeGridWeek,resourceTimeGridDay'
        },
        initialView: 'resourceTimeGridWeek',
        slotMinTime: '09:00:00',
        slotMaxTime: '21:30:00',
        allDaySlot: false,
        events: [
          {
            title: 'Event 2',
            start: '2021-09-28T09:00',
            end: '2021-09-28T10:30'
          },
          {
            title: 'Event 1',
            start: '2021-09-28T11:00',
            end: '2021-09-28T13:00'
          }
        ]
      }
    }
  },
  methods: {
    logEvents () {
      console.log(this.calendarOptions.events)
    }
  }
}
</script>

<style>

@import '~@fullcalendar/list/main.min.css';
</style>
 

И идеи о том, что я делаю не так?

Заранее большое вам спасибо.

С уважением.