[Vuejs]-Get and Display events on Vue.js Fullcalendar from MySQL

by

0👍

The issue was the the Route('/event') . There already exist a route with that name.

Here is the code to get the events and display it on https://fullcalendar.io calendar.

Route:

Route::get('/event', 'EventController@getEvents');

EventController:

 public function getEvents()
    {
         $getEvents = Event::query()->select('projectid',
            'eventid',
            'start_time',
            'end_time',
            'notes',
            'taskid')
            ->get();

        $events = [];

        foreach ($getEvents as $values) {
            $event = [];
            $startTime = Carbon::parse($values->start_time)->format("Y-m-d H:s");
            $endTime = Carbon::parse($values->end_time)->format("Y-m-d H:s");
            $startTime = Carbon::parse($startTime)->timezone("Africa/Windhoek");
            $endTime = Carbon::parse($endTime)->timezone("Africa/Windhoek");

            $values->start_time = $startTime;
            $values->end_time = $endTime;

            $event['id'] = $values->eventid;
            $event['title'] = $values->notes;
            $event['start'] = $values->start_time;
            $event['end'] = $values->end_time;
            $event['allDay'] = false;
            $events[] = $event;
        }

        return response()->json($events);
    }

FullCalendar.vue

<template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions" :events="event"/>
</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
  },
  props: {},
  data() {
    return {
      calendarOptions: {
        plugins: [timeGridPlugin, interactionPlugin],
        initialView: 'timeGridWeek',
        weekends: false,
        editable:true,
        eventClick: this.handleEventClick,
        dateClick:this.handleDateClick,
        events: []
      },
    }
  },
  computed: {},
  methods: {
    handleEventClick: function (arg) {
      alert('Event' + event.title)
    },
    handleDateClick: function (arg) {
    },
    getEvents: function () {
      this.$http.get('/event').then((response) => {
        console.log(response);
        this.calendarOptions.events = response.data;
      }, (error) => {
      })
    }
  },
  mounted() {
    this.events = this.getEvents();
  },
}
</script>

<style scoped>
</style>

home.blade.php

     <v-card>
        <v-layout row wrap>
            <v-flex>
                <full-calendar></full-calendar>
            </v-flex>
        </v-layout>
    </v-card>

Leave a comment