Vuejs Fullcalendar 事件未显示

Question

我已经尝试了很多次，但无法获得完整日历中显示的数据。这是我的日历组件：

<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',
                selectable:true,
            },
            events:''
        }
    },
    methods: {

        getEvents() {
            axios.get('/api/booking-cal')
                .then(resp => (this.events = resp.data.data))
                .catch(err => console.log(err.response.data));
        }
    },
    created(){
        this.getEvents();
    }

}
</script>
<template>
    <FullCalendar :options="calendarOptions" :events="events"/>
</template>

我的后端工作正常，当我检查 'network' 时，我得到 'title'、'start' 和 'end'（如下所示）；但不知何故，信息没有传递给 'events'，也没有显示在 fullcalendar 上。

data: [{title: "erdem senol", start: "2021-01-13", end: "2021-01-17"},…]

请帮助我，我卡在了项目的中间。

Answer 1

您的 'events' 数组必须在 calendarOptions 对象内：

calendarOptions: {
                plugins: [ dayGridPlugin, interactionPlugin ],
                initialView: 'dayGridMonth',
                selectable:true,
                events:[]
            },

Vuejs Fullcalendar 事件未显示

Vuejs Fullcalendar events not showing

fullcalendar

vue.js