Laravel full calendar with add, edit, delete and view event
This tutorial is for Laravel full calendar with add, edit, delete, and view event examples. this example will help you Laravel 8 full calendar tutorial. In this example, we will simply create a crud application with the full calendar so you can easily create an event, edit an event by drag and drop, view an event, and delete the event.
Install Laravel 8
Run the bellow command and get a clean fresh Laravel 8 application.
composer create-project --prefer-dist laravel/laravel blogCreate Migration and Model
We have to create migration for events table using Laravel 8 php artisan command, so run bellow command:
php artisan make:migration create_events_table#database/migrations/2020_12_23_172628_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->date('start_date');
$table->date('end_date');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down() {
Schema::dropIfExists('events');
}
}
Then after, simply run the migration:
php artisan migrateThis command creates an events table in your database.
Create model
We have to create a model for events, so run bellow command:
php artisan make:model event# app/event.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class event extends Model
{
protected $fillable = [ 'title', 'start_date', 'end_date' ];
}
Create routes
We will add routes and controller files. so add below route.
# routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CalenderController;
Route::get('calender', [CalenderController::class, 'index']);
Route::post('calenderAjax', [CalenderController::class, 'ajax']);Create controller file
Now create a new CalenderController for the index and ajax method.
php artisan make:controller CalenderController# app/Http/Controllers/CalenderController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\event;
class CalenderController extends Controller
{
public function index(Request $request) {
if($request->ajax()) {
$events = event::whereDate('start_date', '>=', $request->start)->whereDate('end_date', '<=', $request->end)->get(['id', 'title', 'start_date', 'end_date']);
return response()->json($events);
}
return view('calender');
}
public function ajax(Request $request) {
switch ($request->type) {
case 'add':
$event = event::create([
'title' => $request->title,
'start_date' => $request->start,
'end_date' => $request->end,
]);
return response()->json($event);
break;
case 'update':
$event = event::find($request->id)->update([
'title' => $request->title,
'start_date' => $request->start,
'end_date' => $request->end,
]);
return response()->json($event);
break;
case 'delete':
$event = event::find($request->id)->delete();
return response()->json($event);
break;
default:
break;
}
}
}
Create blade file
We will create a calender.blade.php file to display the full calender and we will write js code for the crud app.
# resources/views/calender.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel fullcalendar with add,edit,delete and view event example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
</head>
<body>
<div class="container">
<h1>Laravel fullcalendar with add,edit,delete and view event example</h1>
<div id='calendar_id'></div>
</div>
<script>
$(document).ready(function () {
var SITEURL = "{{ url('/') }}";
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#calendar_id').fullCalendar({
editable: true,
// events: SITEURL + "/calender",
events: function(start, end, timezone, callback) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD");
$.ajax({
type: 'GET',
url: SITEURL + "/calender",
data: {
start: start,
end: end,
},
dataType: 'json',
success: function(data) {
var events = [];
$(data).each(function() {
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
start: $(this).attr('start_date'),
end: $(this).attr('end_date'),
});
});
callback(events);
},
error : function(data) {
alert("Ajax call error");
return false;
},
});
},
displayEventTime: false,
editable: true,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Enter Event Title :');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD");
$.ajax({
url: SITEURL + "/calenderAjax",
data: {
title: title,
start: start,
end: end,
type: 'add'
},
type: "POST",
success: function (data) {
displayMessage("Event successfully created!");
calendar.fullCalendar('renderEvent',{
id: data.id,
title: title,
start: start,
end: end,
allDay: allDay
},true);
calendar.fullCalendar('unselect');
}
});
}
},
eventDrop: function (event, data) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");
$.ajax({
url: SITEURL + '/calenderAjax',
data: {
title: event.title,
start: start,
end: end,
id: event.id,
type: 'update'
},
type: "POST",
success: function (response) {
displayMessage("Event successfully updated!");
}
});
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete this event?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: SITEURL + '/calenderAjax',
data: {
id: event.id,
type: 'delete'
},
success: function (response) {
calendar.fullCalendar('removeEvents', event.id);
displayMessage("Event successfully deleted!");
}
});
}
}
});
});
function displayMessage(message) {
toastr.success(message, 'Event');
}
</script>
</body>
</html>
