Integrating Full Calendar in your Laravel application

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>