How to Display Events in Calendar with Laravel 8 Vue JS App

Last updated on by Digamber

Throughout this Laravel 8 Vue js calendar example tutorial, we will explain how to display dynamic events on the calendar with the help of the vue FullCalendar plugin within the laravel 8 application.

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.

FullCalendar is notable for showing events; nonetheless, it isn’t a perfect solution for event content-management. Ahead dragging an event to a particular time/day can not change an event’s name or other associated data. However, you can make this possible using FullCalendar’s API.

Let’s check out step by step on how to implement the full calendar in Laravel 8 Vue Js.

Laravel 8 Vue JS FullCalendar Example

Here is the assortment of steps of this tutorial towards displaying events with full calendar package in Laravel and Vue JS project:

  • Create Laravel project
  • Make database connection
  • Generate and configure model, also migration
  • Vue Full calendar plugin configuration in laravel
  • Create routes
  • Generate and configure the controller
  • Create and set up Vue component
  • Connect laravel and Vue with blade view
  • Start the laravel development server

Create Laravel Project

Generically, the first step begins with laravel project installation:

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

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

Configure Model and Run Migration

In subsequent step, you have to create a model to set a table columns or properties in the database:

php artisan make:model EventList -m

Append code in app/Models/EventList.php:

<?php

namespace App\Models;

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

class EventList extends Model
{
    use HasFactory;
    protected $fillable = [
        'event_name',
        'event_start',
        'event_end'
    ];
}

Add values which are to be migrated in database within database/migrations/create_event_lists_table.php:

<?php

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

class CreateEventListsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('event_lists', function (Blueprint $table) {
            $table->id();
            $table->string('event_name');
            $table->date('event_start');
            $table->date('event_end');            
            $table->timestamps();
        });
    }

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

Migrate the table values:

php artisan migrate

Install Full Calendar and NPM Packages

Next, execute the given command to 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 vue-full-calendar

npm i babel-runtime
 
npm i babel-preset-stage-2
 
npm i moment

Run npm command to compile scaffolding:

npm install

Create Calendar Controller

Open terminal window, execute command to generate a new controller:

php artisan make:controller CalendarController

Add code in app\Http\Controllers\CalendarController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\EventList;

class CalendarController extends Controller
{
    
    public function index()
    {   
        return view('welcome');
    }

    public function calendarEvents(Request $request)
    {
        $eventList = EventList::get(['event_name','event_start']);
        return response()->json(["My events" => $eventList]);
    }
}

Create Routes

In this step, you have to go to routes/web.php file, and add following code to create route:

<?php

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


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', [CalendarController::class, 'index']);

Route::get('show-events', [CalendarController::class, 'calendarEvents']);

Setting up Vue Component

Move to resources/js/components/ directory, also create CalendarComponent.vue template file:

After that, update the resources/js/components/CalendarComponent.vue file with below code:

<template>
    <div class="container">
        <full-calendar 
            :events="calendarEvents"
            :header="{
                    left: 'prev, next today',
                    center: 'title',
                    right: 'dayGridMonth, timeGridWeek, timeGridDay, listWeek',
                }"
        >
        </full-calendar>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                calendarEvents: [{
                    events(start, end, timezone, callback) {
                        axios.get('http://localhost:8000/show-events').then(res => {
                            callback(res.data.eventList)
                        })
                    },
                    color: 'blue',
                    textColor: 'white',
                }]
            }
        }
    }
</script>

Next, import full calendar, also define the Vue component within resources/js/app.js file:

require('./bootstrap');
import 'fullcalendar/dist/fullcalendar.css';
import FullCalendar from 'vue-full-calendar';

window.Vue = require('vue');
Vue.use(FullCalendar);

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('calendar-component', require('./components/CalendarComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

Add the vue component directive within resources/views/welcome.blade.php file to show the full calendar in view:

@extends('layout.app')
 
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                  <calendar-component></calendar-component>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Get inside the resources/views/ folder create a layout folder similarly create a app.blade.php file.

Afterwards, add the below code in resources/views/layout/app.blade.php:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <title>Laravel Vue JS Display Events with FullCalendar Example</title>
 
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
</head>
<body>
    <div id="app">
 
        <main class="py-4">
            @yield('content')
        </main>
 
    </div>
</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

Laravel 8 Vue JS Full Calendar Example

We are done for now, hope this immaculate Laravel 8 Vue JS full calendar tutorial with example will help you.