How to Display Events in Calendar with Laravel 11 Vue JS 3

by

In this tutorial on Laravel 11 Vue js 3 Calendar integration, we’ll guide you through the process of showcasing dynamic events using the Vue FullCalendar plugin in your Laravel application. This comprehensive guide will demonstrate how to seamlessly integrate and display events on your calendar.

FullCalendar seamlessly integrates with the Vue JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API.

The FullCalendar plugin is a JavaScript-based calendar plugin that is specially designed for Laravel Vue JS applications.

The full calendar is robust, relentless, developer-friendly equally important, an open-source plugin used to display events, dates, and calendar related tasks.

Official Site: Vue FullCalendar

Laravel 11 Vue JS 3 FullCalendar Example

Here are the steps outlined in this tutorial for displaying events using the FullCalendar package in a Laravel and Vue.js project

  • Step 1: Install Laravel app
  • Step 2: Configure database connection
  • Step 3: Generate model and migration
  • Step 4: Install Full Calendar and NPM Packages
  • Step 5: Create Calendar Controller
  • Step 6: Define routes
  • Step 7: Create and set up Vue component
  • Step 8: Connect Vue with laravel blade view
  • Step 9: Start development server

# Install Laravel App

Generically, the first step begins with laravel project installation:

composer create-project laravel/laravel laravel-vue-calendar-example --prefer-dist

Go inside the app

cd laravel-vue-calendar-example

# Configure Database Connection

Open .env file, place your database details to make the connection between laravel and database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

# Create Model and Run Migration

Now generate model and migration file using the below command.

php artisan make:model Event -m

Update the fillable properties in your event model.

app/Models/Event.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Event extends Model
{
    use HasFactory;
    protected $fillable = [
      'title', 'start', 'end'
    ];
}

Update your database columns which you need for.

database\migrations\2022_02_20_040359_create_events_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->dateTime('start')->nullable();
            $table->dateTime('end')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

Migrate the table values:

php artisan migrate

# Install Full Calendar and NPM Packages

Now install laravel UI, It will conjugate a ready-made scaffold with all the necessary controller, routes, and views:

composer require laravel/ui

Use command to install Vue components in laravel:

php artisan ui vue

Next, up you have to install full calendar and dependent packages for it:

npm i @fullcalendar/vue
npm i @fullcalendar/daygrid
npm i @fullcalendar/timegrid
npm i @fullcalendar/interaction

Run npm command to compile scaffolding:

npm install

# Create Calendar Controller

Create a new controller using the below command.

php artisan make:controller CalendarController

Update the following code in your controller.

app\Http\Controllers\Api\CalendarController.php

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Event;

class CalendarController extends Controller
{
    public function showEvents(Request $request) {
        $events = Event::all();
        return response()->json(["events" => $events]);
    }
}

# Define Routes

Update your web and api routes using the below code.

routes\web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('{any}', function () {
    return view('layouts.app');
})->where('any', '.*');

routes\api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\CalendarController;


Route::middleware('api')->group(function () {
    Route::get('show-events' ,[CalendarController::class,'showEvents']);
});

# Setting up Vue Component

Create calender component and update the below code on it.

resources/js/components/CalendarComponent.vue

<template>
    <div class="container">
        <h1>Laravel Vue display events in calendar example</h1>
        <FullCalendar :options="calendarOptions" />
    </div>
</template>
<script>
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'
    import timeGridPlugin from '@fullcalendar/timegrid'
    import interactionPlugin from '@fullcalendar/interaction'

    export default {
        components: {
          FullCalendar
        },
        data() {
            return {
                calendarOptions: {
                    headerToolbar: {
                      left: 'prev, next today',
                      center: 'title',
                      right: 'dayGridMonth, timeGridWeek, timeGridDay'
                    },
                    plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
                    initialView: 'dayGridMonth',
                    showNonCurrentDates: false,
                    editable: false,
                    selectable: false,
                    height: 600,
                    slotDuration: '00:30',
                    allDaySlot: false,
                    views: {
                      dayGrid: {
                         dayMaxEventRows: 3
                      }
                    },
                    eventTimeFormat: {
                      hour: '2-digit',
                      minute: '2-digit',
                      meridiem: true
                    },
                    events: []
                }
            }
        },
        created() {
            this.getEvents();
        },
        methods: {
            getEvents() {
              this.axios.get('http://127.0.0.1:8000
/api/show-events')
                  .then(response => {
                      this.calendarOptions.events = response.data.events;
                  });
            }
        }
    }
</script>


resources\js\routes.js

Create routes.js file and update the below code on it.

import CalendarComponent from './components/CalendarComponent.vue';

export const routes = [
    {
        path: '/calendar',
        component: CalendarComponent,
        name: "CalendarComponent"
    }
];

Use the routes and component in your main app.js file just like below.

resources\js\app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

 require('./bootstrap');
 import Vue from 'vue'; // if this is not work add this =>  window.Vue = require('vue');

 import axios from 'axios';
 import VueAxios from 'vue-axios';
 import VueRouter from 'vue-router';

 Vue.use(VueRouter);
 Vue.use(VueAxios, axios);

 import App from './app.vue';
 import { routes } from './routes';


 const router = new VueRouter({
     mode: 'history',
     routes: routes
 });

 const app = new Vue({
     el: '#app',
     router: router,
     render: h => h(App),
 });


Create your layout file and update the code here.

resources\js\app.vue

<template>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link :to="{ name: 'CalendarComponent' }"  class="nav-item nav-link">Calendar</router-link>
                </div>
            </div>
        </nav>
        <router-view> </router-view>
    </div>
</template>

<script>
    export default {}
</script>

Update your app blade file just like below.

resources\views\layouts\app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}" />

    <title>Vue JS CRUD Operations in Laravel</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

</html>

Ultimately its time to test out what we have built so far, so start the npm:

npm run watch

In another terminal use command to invoke the laravel server:

php artisan serve


On the following URL, check the result:

http://127.0.0.1:8000