我已经创建了一个vue+dotnet核心项目,并遵循此repo。该项目使用vue的typescript。现在,我想将完整日历添加到我的项目中。但当我运行该项目时,我在浏览器控制台中遇到了异常(挂载钩子中的错误:"错误:FullCalendar视图"dayGridMonth"不存在。请确保正确加载了插件。"(。
Schedule.vue
<template>
<v-container fluid>
<v-slide-y-transition mode="out-in">
<v-row>
<v-col>
<FullCalendar :weekends="false" defaultView="dayGridMonth" :plugins="calendarPlugins" :events="fsEvents"/>
</v-col>
</v-row>
</v-slide-y-transition>
</v-container>
</template>
<script lang="ts">
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import { Component, Vue, Prop } from 'vue-property-decorator';
import Flow from '@/components/Flow.vue';
@Component({
components: {
Flow,
FullCalendar,
},
props: {
fsEvents: {
type: Array,
default: () => {
return [{ title: 'event 1', date: '2020-04-01' }, { title: 'event 2', date: '2020-04-02' }];
},
},
},
data: () => {
return { calendarPlugins: dayGridPlugin };
},
})
export default class ScheduleView extends Vue { }
</script>
<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>
我应该如何在代码中加载fullcalendar compnent插件?谢谢
我已经找到了解决方案。数据中的calendarPlugins应该是一个数组,而不是一个对象。以下代码解决了我的问题。
@Component({
components: {
Flow,
FullCalendar,
},
props: {
fsEvents: {
type: Array,
default: () => {
return [{ title: 'event 1', date: '2020-04-01' }, { title: 'event 2', date: '2020-04-02' }];
},
},
},
data: () => {
return { calendarPlugins: [dayGridPlugin] };
},
})