Integrating Full Calendar in your Laravel application
Use Case Scenario:
A custom Laravel web application requires an integrated calendar app within the application that users can Add, Edit and Delete calendar events within the application. Using FullCalendar addresses this requirement.
Part 1 will guide you to integrate FullCalendar in your Laravel application.
FullCalendar is a powerful and lightweight JavaScript calendar library used to create dynamic calendars in your web application.
Import the latest FullCalendar JS library.
Get the script tag at jsdelivr.com and place it between <head> … </head> in your Laravel application
<script src=’https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js’></script>
Create Event Model with migration
php artisan make:model Event -m
Open and update create_events_table.php inside database/migrations folder
public function up()
{
Schema::create(‘events’, function (Blueprint $table) {
$table->increments(‘id’);
$table->string(‘title’);
$table->dateTime(‘start’);
$table->dateTime(‘end’);
$table->timestamps();
});
}
Run the migration
php artisan migrate
Open and update app/Event.php file
class Event extends Model
{
protected $fillable = [‘title’,’start_date’,’end_date’];
}
Create Event Controller
php artisan make:controller EventController
Open and update EventController.php inside app/controllers/
public function myCalendar(){
return view(‘calendar.mycalendar’);
}
Create mycalendar.blade.php
@extends(‘layouts.app’)
@section(‘content’)
<div class=”row justify-content-center”>
<div class=”col-md-8″>
<div class=”card”>
<div class=”card-header”>
<div class=”card-title”>My Calendar</div>
</div>
<div class=”card-body”>
<div id=’calendar’></div>
</div>
</div>
</div>
</div>
@endsection
Create route inside web.php
Route::get(‘/calendar/mycalendar’, [EventController::class, ‘mycalendar’])->name(‘calendar.mycalendar’);
Add a javascript in mycalendar.blade.php to render the calendar
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var calendarEl = document.getElementById(‘calendar’);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: ‘dayGridMonth’,
editable: true,
displayEventTime: false,
});
calendar.render();
});
</script>
FullCalendar Tutorial Series:
