未知自定义元素：<FullCalendar> - FullCalendar Vue

Question

我正在尝试创建一个利用FullCalendar vue组件的vue组件：

<script>
import FullCalendar from '@fullcalendar/core'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar
  },
  data: function() {
    return { 
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth',
        events: '/schedule/month_events',
        eventOrder: "building_id",
        selectable: true,
        defaultAllDay: true,
        editable: true,   
        dateClick: this.handleDateClick,
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'prev today next'
        }
      }
    }
  },
  methods: {
    handleDateClick: function(arg) {
      console.log('test');
    }
  }
}
</script>

<template>
  <FullCalendar :config="calendarOptions" />
</template>

<style scoped>
</style>

我得到了以下错误：

[Vue warn]: Unknown custom element: <FullCalendar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

如果我创建自己的组件，它会显示模板，并发现组件很好。

如何在Vue JS组件中正确使用FullCalendar组件？

Answer 1

由于您使用的是Vue组件，所以需要从@fullcalendar/vue导入。您目前正在从@fullcalendar/core导入。