CODEWITHSUNDEEP
vue.jsfullcalendar
erdo
erdo

Reputation: 49

Vuejs Fullcalendar events not showing

i have tried many number of times but can't get the data shown in fullcalendar. This is my Calendar component:

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

My backend works fine, i get the 'title', 'start', and 'end' when i inspect 'network' (as shown below); but somehow the information is not passed to the 'events' and doesn't show up on fullcalendar.

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

Please help me, im stuck in the middle of a project.

Upvotes: 2

Views: 2520

Answers (1)

jssDev
jssDev

Reputation: 993

Your 'events' array must be inside calendarOptions object:

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

Upvotes: 6

Related Questions