未知的自定义元素：<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.

导入

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

Unknown custom element: <FullCalendar> - FullCalendar Vue

fullcalendar

vue.js

fullcalendar-5