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.