我正在尝试使用 fullcalendar.io。我遵循示例和文档。但是，在调用函数时，它会出现几个错误，我无法解决它，因为我不明白错误的原因。

错误 1：

[Vue warn]: Error in data(): "ReferenceError: handleDateSelect is not defined"

found in

---> <Calendary> at src/components/Calendary.vue
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

错误 2：

vue.runtime.esm.js?2b0e:1897 ReferenceError: handleDateSelect is not defined
    at VueComponent.data (Calendary.vue?87e1:77)
    at getData (vue.runtime.esm.js?2b0e:4761)
    at initData (vue.runtime.esm.js?2b0e:4718)
    at initState (vue.runtime.esm.js?2b0e:4655)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5020)
    at new VueComponent (vue.runtime.esm.js?2b0e:5168)
    at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3304)
    at init (vue.runtime.esm.js?2b0e:3133)
    at createComponent (vue.runtime.esm.js?2b0e:6022)
    at createElm (vue.runtime.esm.js?2b0e:5969)

错误 3：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "calendarOptions" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Calendary> at src/components/Calendary.vue
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

错误 4：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'weekends')"

found in

---> <Calendary> at src/components/Calendary.vue
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

错误 5：

[Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'handleDateSelect')"

found in

---> <Calendary>
       <Home> at src/views/Home.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

这些只是其中的几个，它们仅在我调用函数时出现。 我正在使用带有 vuetify 的 vue 3。

代码：

<template>
  <div class='demo-app'>
    <div class='demo-app-sidebar'>
      <div class='demo-app-sidebar-section'>
        <h2>Instructions</h2>
        <ul>
          <li>Select dates and you will be prompted to create a new event</li>
          <li>Drag, drop, and resize events</li>
          <li>Click an event to delete it</li>
        </ul>
      </div>
      <div class='demo-app-sidebar-section'>
        <label>
          <input
            type='checkbox'
            :checked='calendarOptions.weekends'
            @change='handleWeekendsToggle'
          />
          toggle weekends
        </label>
      </div>
      <div class='demo-app-sidebar-section'>
        <h2>All Events ({{ currentEvents.length }})</h2>
        <ul>
          <li v-for='event in currentEvents' :key='event.id'>
            <b>{{ event.startStr }}</b>
            <i>{{ event.title }}</i>
          </li>
        </ul>
      </div>
    </div>
    <div class='demo-app-main'>
      <FullCalendar
        class='demo-app-calendar'
        :options='calendarOptions'
      >
        <template v-slot:eventContent='arg'>
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
    </div>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {

  components: {
    FullCalendar
  },

  data: () => ({
    calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'dayGridMonth',
        // initialEvents: INITIAL_EVENTS,
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect
        // eventClick: this.handleEventClick,
        // eventsSet: this.handleEvents
    },
    currentEvents: []
  }),
  methods: {
    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
    },

    handleDateSelect(selectInfo) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar

      calendarApi.unselect() // clear date selection

      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    },

    handleEventClick(clickInfo) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },

    handleEvents(events) {
      this.currentEvents = events
    }
  },
};
</script>

<style lang='css' scoped>

  h2 {
    margin: 0;
    font-size: 16px;
  }

  ul {
    margin: 0;
    padding: 0 0 0 1.5em;
  }

  li {
    margin: 1.5em 0;
    padding: 0;
  }

  b { /* used for event dates/times */
    margin-right: 3px;
  }

  .demo-app {
    display: flex;
    min-height: 100%;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  .demo-app-sidebar {
    width: 300px;
    line-height: 1.5;
    background: #eaf9ff;
    border-right: 1px solid #d3e2e8;
  }

  .demo-app-sidebar-section {
    padding: 2em;
  }

  .demo-app-main {
    flex-grow: 1;
    padding: 3em;
  }

  .fc { /* the calendar root */
    max-width: 1100px;
    margin: 0 auto;
  }

</style>