I am trying to fetch events from my MySQL database and pass them to my Vue component to be displayed on the FullCalendar. However, the event array is being populated with a full HTML document.
Below is my EventController:
public function getEvents()
{
$getEvents = Event::query()->select('projectid','event_id','start_time','end_time','notes','taskid')->get();
$events = [];
foreach ($getEvents as $values) {
$event = [];
$event['eventid'] = $values->event_id;
$event['projectid'] = $values->projectid;
$event['start_time'] = $values->start_time;
$event['end_time'] = $values->end_time;
$event['notes'] = $values->notes;
$event['taskid'] = $values->taskid;
$events[] = $event;
}
return json_encode($events);
}
My FullCalendar.vue Component:
<template>
<FullCalendar
ref="fullCalendar"
:options="calendarOptions"
color="primary"
:events="getEvents"
:type="type"
v-model="query"
></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import axios from 'axios'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
props: {},
data() {
return {
events: [],
calendarOptions: {
plugins: [timeGridPlugin, interactionPlugin],
initialView: 'timeGridWeek',
weekends: false,
eventClick: this.handleEventClick,
},
}
},
computed: {},
methods: {
handleEventClick: function (arg) {
alert('Event: ' + arg.events);
},
getEvents: function () {
this.$http.get('/events', {data: {query: this.query}}).then((response) => {
this.events = response.data;
console.log(this.events);
}, (error) => {
})
}
},
mounted() {
this.getEvents();
},
}
</script>
<style scoped>
</style>
My Routes:
Route::get('/events', 'EventController@getEvents')->name('event.getEvents');
My blade.php:
<v-card>
<v-layout row wrap>
<v-flex>
<v-btn color="primary" dark @click="newEventDialog = true">
New Event
</v-btn>
<full-calendar></full-calendar>
</v-flex>
</v-layout>
</v-card>
This is what is currently being populated in my events array:
"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n .........