时间戳

首页 > 解决方案 > Vuejs Fullcalendar事件未显示

vue.js - Vuejs Fullcalendar事件未显示

问题描述

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

<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>

我的后端工作正常，当我检查“网络”时，我得到了“标题”、“开始”和“结束”（如下所示）；但不知何故，信息没有传递给“事件”，也没有出现在全日历上。

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

请帮助我，我陷入了一个项目的中间。

标签： vue.jsfullcalendar

解决方案

您的“事件”数组必须在 calendarOptions 对象内：

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

推荐阅读