[Vue warn]: Error in mounted hook: "Error: viewType "" is not available. Please make sure you've loaded all neccessary plugins

Question

我正在尝试将 FullCalendar 用作 Laravel 中的 vue 组件。我已经按照文档正确加载了插件，但出于某种原因，它们没有加载 https://fullcalendar.io/docs/vue

组件：

template>
    <div class="container">
        <div class="row justify-contnet-center">
            <div class="col-lg-8">
                <form @submit.prevent>
                    <div class="form-group">
                        <label for="event_name">event Name</label>
                            <input
                                type="text"
                                id="event_name"
                                class="form-control"
                                v-model="newevent.event_name"
                            >
                    </div>
                    <div class="row">
                        <div class="cold-lg-8">
                            <div class="form-group">
                                <label for="date">Date</label>
                                    <input
                                        type="date"
                                        id="date"
                                        class="form-control"
                                        v-model="newevent.date"
                                    >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="form-group">
                                    <label for="time">Time</label>
                                        <input
                                            type="time"
                                            id="time"
                                            class="form-control"
                                            v-model="newevent.time"
                                        >
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4" v-if="addingMode">
                        <button class="btn btn-custom" @click="addNewevent">Book event</button>
                    </div>
                    <template>
                        <div class="col-lg-6 mb-4">
                            <button class="btn btn-success" @click="updateevent">Update</button>
                            <button class="btn btn-danger" @click="deleteevent">Delete</button>
                            <button class="btn btn-warning" @click="addingMode = !addingMode">Cancel</button>
                        </div>
                    </template>
                </form>
            </div>
            <div class="col-lg-8 full-calendar" id="calendar">
                <FullCalendar  @eventClick="showevent" defaultView:="dayGridMonth" :plugins="calendarPlugins" :events="events"/>
            </div>
        </div>
    </div>
</template>

<script>
import { Calendar } from '@fullcalendar/core'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import axios from 'axios'


export default {
    components:{
        FullCalendar // make custom tag avaliable
    },
    data() {
        return {
            calendarPlugins: [ dayGridPlugin, interactionPlugin],
            events: "",
            newevent: {
                event_name: "",
                date: "",
                time: ""
            },
            addingMode: true,
            indexToUpdate: ""
        };
    },
    created() {
        this.getevents();
    },
    methods: {
        addNewevent() {
            axios.post('/api/event', {
                ...this.newevent
            })
            .then(data=> {
                this.getevents(); //update list of getevents
                this.resetForm();
            })
            .catch(err =>
                // alert("Unable to add event")
                console.log(err.response.data)
            );
        },
        showevent(arg) {
            console.logt(arg);
            this.addingMode = false;
            const {id, event, date, time} = this.events.find (
                event => event.id === +arg.event.id
            );
            this.indexToUpdate = id;
            this.newevent = {
                event_name: event, // comeback to and see if inserts into db as event_name
                date: date,
                time: time
            };
        },
        updateevent() {
            axios.put('/app/event/' + this.indexToUpdate, {
                    ...this.newevent
                })
                .then(resp => {
                    this.resetForm();
                    this.getevents();
                    this.addingMode = !this.addingMode;
                })
                .catch(err =>
                    // alert('Unable to update event!')
                    console.log(err.response.data)
                );
        },
        deleteevent() {
            axios.delete('/api/event/' + this.indexToUpdate)
            .then(resp => {
                this.resetForm();
                this.getevents();
                this.addingMode = !this.addingMode;

            })
            .catch(err =>
                // alert('Unable to delete event')
                console.log(err.response.data)
            );
        },
        getevents(){
            axios.get('/api/event')
            .then(resp => (this.events = resp.data.data))
            .catch(err => console.log(err.response.data));
        },
        resetForm() {
             Object.keys(this.newevent).forEach(key=> {
                 return (this.newevent[key] = "");
             });
        }
    },
    watch: {
        indexToUpdate() {
            return this.indexToUpdate
        }
    }
};

然后我也根据文档的这一部分用 es6 初始化了组件 https://fullcalendar.io/docs/initialize-es6

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('DOMContentLoaded', function() {
  let calendarEl = document.getElementById('calendar');

  let calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin , interactionPlugin ]
  });

  calendar.render();
});

这是我的app.js

Vue.component('calendar-component', require('./components/CalendarComponent.vue').default);

Answer 1

<FullCalendar  @eventClick="showevent" defaultView:="dayGridMonth" :plugins="calendarPlugins" :events="events"/>

应该变成

<FullCalendar :options="calendarOptions" />

我在 github 中看到了 FullCalendar 代码，它不支持道具 defaultView 和插件。相反，它使用名称为“options”的道具

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

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [ dayGridPlugin, interactionPlugin ],
        initialView: 'dayGridMonth'
      }
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>

请查看插件文档

[Vue warn]: Error in mounted hook: "Error: viewType "" is not available. Please make sure you've loaded all neccessary plugins

[Vue warn]: Error in mounted hook: "Error: viewType "" is not available. Please make sure you've loaded all neccessary plugins

fullcalendar

laravel

vue.js