Integrating Full Calendar in your Laravel application
Part 1. Integrating Full Calendar 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 migrationphp 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>