CODEWITHSUNDEEP
javascriptvue.jsfullcalendarfullcalendar-4
Ryan Sacks
Ryan Sacks

Reputation: 522

How can I display data in my Calendar using Full Calendar and Vue js?

I'm trying to display my data on the Calendar. I'm using Full Calendar and Vue js. I'm successfully retrieving the data, I'm using a service.file that is making the api request, which loads the data and it's being loaded into events: ''. This is done in Laravel/php on the backend. If you need to see this code let me know but it's just returning everything from my interviews table into json. When I console.log() I can see the data and I'm trying to bind it on the <Fullcalendar /> component as seen below, but I can't get it to show in the calendar. What am I doing wrong?

<template>
    <div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <Fullcalendar :plugins="calendarPlugins" :events="events" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Fullcalendar from "@fullcalendar/vue";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import timeGridPlugin from "@fullcalendar/timegrid";
    import interactionPlugin from "@fullcalendar/interaction";
    import * as employerInterviewService from '../services/employer_interview_service.js';

export default {

        components: {
            Fullcalendar
        },

        data() {
            return {
                calendarPlugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
                events: "",
            };
        },

        created() {
            this.getEvents();
        },

        methods: {

            getEvents: async function() {
                const response = await employerInterviewService.loadInterviews();
                this.events = response.data.events;

                console.log(this.events);

            },

        },

    };
</script>

Upvotes: -1

Views: 1788

Answers (1)

Ryan Sacks
Ryan Sacks

Reputation: 522

I changed the column in my table from start_date to start and my title column in my tables were empty. I added some data to them and now it's working. –

Upvotes: 1

Related Questions