Laravel 9 Vue js Full Calendar display Events Example Tutorial

by

Using this Laravel 9 Vue js calendar example tutorial, you will learn how to display dynamic events on the calendar using vue FullCalendar plugin in laravel application. We are using the vue FullCalendar package to displaying events in laravel 9 application.

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

The full calendar is robust, relentless, developer-friendly equally important, an open-source plugin used to display events, dates, and calendar related tasks. Let’s check out step by step on how to implement the full calendar in Laravel 9 Vue.js.

Official Site: Vue FullCalendar

Laravel 9 Vue JS FullCalendar Example

Follow the following steps to displaying events with full calendar package in Laravel and Vue JS application:

  • 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

First at all install new fresh laravel app using the following command;

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

So, we have implement laravel vue js to display events in a calendar using the full-calendar package.

Leave a Comment