How to Implement Fullcalendar in Laravel 8 App with Vue.js

FullCalendar is a JavaScript library that makes it easy to create interactive calendars. It is a popular choice for creating event calendars, schedule planners, and other types of calendar-based applications.

In this tutorial, you will learn how to display events on the calendar using vue js fullcalendar components in laravel 8 apps. To implement Fullcalendar in Laravel 8 application with Vue.js we follow the following steps.

Table of Contents

  • Step 1: Install Laravel 8 App
  • Step 2: Connecting App to Database
  • Step 3: Create Model And Migration
  • Step 4: NPM Module Configuration For Vue Js
  • Step 5: Add Routes
  • Step 6: Create Controller By Command
  • Step 7: Create Vue Component
  • Step 8: Create Blade Views And Initialize Vue Components
  • Step 9: Run Development Server

Step 1: Install Laravel 8 App

In this step, you need to install laravel latest application setup, So open your terminal OR command prompt and run the following command:

composer create-project --prefer-dist laravel/laravel blog 

Step 2: Connecting App to Database

After successfully install laravel new application, Go to your project root directory and open .env file. Then set up database credential in .env file as follow:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Next step, you need to run the following command:

php artisan make:model Event -m

This command will create one model name Event.php and also create one migration file for the events table.

Now open create_events_table.php migration file from database>migrations and replace up() function with following code:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('events', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->date('start');
            $table->date('end');
            $table->timestamps();
      });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

Next, migrate the table using the below command:

php artisan migrate

Next, Navigate to app/Models/Event.php and update the following code into your Event.php model as follow:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Event extends Model
{
    use HasFactory;
 
    protected $fillable = [
 
    ];
}

Step 4: NPM Module Configuration For Vue Js

You need to setup Vue and install Vue dependencies using NPM. So run the following command on command prompt:

php artisan preset vue

Install all Vue dependencies:

npm install

After that, install vue full calendar dependencies by using the below command:

npm install --save vue-full-calendar
 
npm install --save babel-runtime
 
npm install babel-preset-stage-2 --save-dev
 
npm install moment --save

Step 5: Add Routes

Next step, go to routes folder and open web.php file and add the following routes into your file:

routes/web.php

use App\Http\Controllers\EventController;
 
Route::get('events', [EventController::class, 'index']);

Step 6: Create Controller By Command

Next step, open your command prompt and run the following command to create a controller by an artisan:

php artisan make:controller EventController

After that, go to app\Http\Controllers and open EventController.php file. Then update the following code into your EventController.php file:

namespace App\Http\Controllers;
 
use App\Models\Event;
use Illuminate\Http\Request;
 
class EventController extends Controller
{
    public function index(Request $request)
    {
        $events = Event::get(['title','start']);
        return response()->json(["events" => $events]);
    }
 
}

Step 7: Create Vue Component

Next step, go to resources/assets/js/components folder and create a file called FullCalendarComponent.vue.

Now, update the following code into your FullCalendarComponent.vue components file:

<template>
<div class="container">
       <full-calendar :event-sources="eventSources"></full-calendar>
       </div>
</template>
<script>
    export default{
  data() {
    return {
      eventSources: [
        {
          events(start, end, timezone, callback) {
            axios.get('http://localhost:8000/events').then(response => {
              callback(response.data.events)
            })
          },
          color: 'yellow',
          textColor: 'black',
        }
      ]
    }
  }
    }
</script>

Now open resources/assets/js/app.js and include the FullCalendarComponent.vue component as follow:

require('./bootstrap');
 
import 'fullcalendar/dist/fullcalendar.css';
 
window.Vue = require('vue');
 
import FullCalendar from 'vue-full-calendar'; //Import Full-calendar
 
Vue.use(FullCalendar);
 
 
Vue.component('fullcalendar-component', require('./components/FullCalendarComponent.vue').default);
 
const app = new Vue({
    el: '#app',
});

Step 8: Create Blade Views And Initialize Vue Components

In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!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 FullCalendar Example - Tutsmake.com</title>
 
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
    @stack('fontawesome')
 
</head>
<body>
    <div id="app">
 
        <main class="py-4">
            @yield('content')
        </main>
 
    </div>
</body>
</html>

Next, Navigate to resources/views/ and open welocome.blade.php. Then update the following code into your welcome.blade.php file as follow:

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue JS FullCalendar Example</div>
                     
                <div class="card-body">
                  <fullcalendar-component></fullcalendar-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection 

Step 9: Run Development Server

Run the following command to start the development server:

npm run dev
 
or 
 
npm run watch

In this tutorial, you have learned how show events on calendar using vue js fullcalendar components in laravel.

#laravel #vue #javascript #php #web-development

How to Implement Fullcalendar in Laravel 8 App with Vue.js
9.40 GEEK