FullCalendar + VUE:没有可用的FullCalendar视图插件

Question

FullCalendar 4.4.2 + VUE

你好!我试图运行FullCalendar插件，但它不想工作。在此之前，我在另一台服务器上运行相同的程序集，一切都很好！这是我的连接代码。我正在使用FullCalendar 4.4.2插件

请告诉我插件错误可能有什么问题。他为什么不想发射？提前感谢您的帮助！

错误:没有可用的FullCalendar视图插件

<template>
    <div class="calendar-view">
        <app-overlay-loader v-if="preloader"/>
        <FullCalendar v-else :options="calendarOptions"/>
    </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 {
    name: "Calendar",
    components: {
        FullCalendar
    },
    props: {
        options: {
            type: Object
        },
        preloader: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            initOptions: {
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
                headerToolbar: {
                    left: 'title',
                    center: 'prev today next',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay',
                },
                initialView: 'timeGridWeek',
                selectable: true,
                views: {
                    dayGridMonth: {
                        titleFormat: {month: 'long', year: 'numeric'}
                    },
                    timeGridWeek: {
                        titleFormat: {month: 'long', year: 'numeric'},
                        weekNumbers: true
                    },
                    timeGridDay: {
                        titleFormat: {day: 'numeric', month: 'long', year: 'numeric'},
                    }
                },
            }
        }
    },
    computed: {
        calendarOptions() {
            return {
                ...this.initOptions,
                slotLabelFormat: this.slotLabel
                , ...this.options
            }
        },
        slotLabel() {
            if (this.$store.state.settings.timeFormat === 12) return undefined;
            return {
                'hour12': false,
                'hour': '2-digit',
                'minute': '2-digit'
            }
        }
    }
}
</script>

错误

[Vue warn]: Error in mounted hook: "Error: No available FullCalendar view plugins."

found in

---> <FullCalendar>
       <Calendar> at resources/js/core/components/calendar/Calendar.vue
         <ActivityCalendar> at resources/js/crm/Component/Views/Activities/Calendar/ActivityCalendar.vue
           <CalendarView> at resources/js/crm/Component/Views/Activities/CalendarView.vue
             <Root>

日历不会装货。请帮我解决这个问题。谢谢！

Answer 1

在自定义视图时，应该添加"type“属性，例如：

 views: {
                dayGridMonth: {
                    type: 'dayGridMonth',
                    titleFormat: {month: 'long', year: 'numeric'}
                },
                timeGridWeek: {
                    type: 'timeGridWeek',
                    titleFormat: {month: 'long', year: 'numeric'},
                    weekNumbers: true
                },
                timeGridDay: {
                    type: 'timeGridDay',
                    titleFormat: {day: 'numeric', month: 'long', year: 'numeric'},
                }
            },