In this example, we will simply create a crud program with fullcalender so you can easily create an event, edit the event by dragging and dropping, and deleting the event. in this example, we will create an event table with a start, planning date, and title column. then you can add, edit and delete that event via database.
Let's follow a few steps to make it a laravel fullcalender crud app.
Step 1: Install Laravel 8
In this step, if you have not yet got the laravel 8 app setup then we should get the new laravel 8 app. So use the below command and get the clean laravel 8 app.
composer create-project --prefer-dist laravel/laravel blogStep 2: Create Migration and Model
In this step we have to create the migration of the event table using the Laravel 8 php artisan command
php artisan make:migration create_events_tableAfter this command you will get one file in the following path "database/migrations" and you have to put the bellow code in your migration file to create an events table.
<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
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');
$table->date('end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('events');
}
}run migration:
php artisan migrateAfter creating the "events" table you should create an Event event model, so first create a file in the "app / Models / Event.php" option and then add the highlighted content to the Event.php file:
app/Models/Event.php
<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Event extends Model {
use HasFactory;
protected $fillable = [
'title', 'start', 'end'
];
}
?>Step 3: Create Routes
In this step we will add routes and controller file so first add bellow route in your routes.php file.
routes/web.php
<?php
use IlluminateSupportFacadesRoute;
use AppHttpControllersFullCalenderController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('fullcalender', [FullCalenderController::class, 'index']);
Route::post('fullcalenderAjax', [FullCalenderController::class, 'ajax']);
?>Step 4: Create Controller File
Now you need to create a New FullCalendar Controller for the ajax guide and path so start running below the command:
php artisan make:controller FullCalenderControllerAfter this command you can find the FullCalenderController.php file in your app/Http/Controllers open the FullCalenderController.php file and enter the bright code in that file.
app/Http/Controllers/FullCalenderController.php
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppModelsEvent;
class FullCalenderController extends Controller {
/**
* Write code on Method
*
* @return response()
*/
public function index(Request $request) {
if ($request->ajax()) {
$data = Event::whereDate('start', '>=', $request->start)
->whereDate('end', '<=', $request->end)
->get(['id', 'title', 'start', 'end']);
return response()->json($data);
}
return view('fullcalender');
}
/**
* Write code on Method
*
* @return response()
*/
public function ajax(Request $request) {
switch ($request->type) {
case 'add':
$event = Event::create([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end,
]);
return response()->json($event);
break;
case 'update':
$event = Event::find($request->id)->update([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end,
]);
return response()->json($event);
break;
case 'delete':
$event = Event::find($request->id)->delete();
return response()->json($event);
break;
default:
# code...
break;
}
}
}
?>Step 5: Create Blade File
Ok, in this last step we will create a fullcalendar.blade.php file to show the full calendar and we will write the js code of the crud app. So first create a fullcalender.blade.php file and then enter the bright code.
resources/views/fullcalender.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Fullcalender Tutorial Tutorial</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.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 FullCalender Tutorial Example</h1>
<div id='calendar'></div>
</div>
<script>
$(document).ready(function() {
var SITEURL = "{{ url('/') }}";
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#calendar').fullCalendar({
editable: true,
events: SITEURL + "/fullcalender",
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('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD");
$.ajax({
url: SITEURL + "/fullcalenderAjax",
data: {
title: title,
start: start,
end: end,
type: 'add'
},
type: "POST",
success: function(data) {
displayMessage("Event Created Successfully");
calendar.fullCalendar('renderEvent',
{
id: data.id,
title: title,
start: start,
end: end,
allDay: allDay
}, true);
calendar.fullCalendar('unselect');
}
});
}
},
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");
$.ajax({
url: SITEURL + '/fullcalenderAjax',
data: {
title: event.title,
start: start,
end: end,
id: event.id,
type: 'update'
},
type: "POST",
success: function(response) {
displayMessage("Event Updated Successfully");
}
});
},
eventClick: function(event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: SITEURL + '/fullcalenderAjax',
data: {
id: event.id,
type: 'delete'
},
success: function(response) {
calendar.fullCalendar('removeEvents', event.id);
displayMessage("Event Deleted Successfully");
}
});
}
}
});
});
function displayMessage(message) {
toastr.success(message, 'Event');
}
</script>
</body>
</html>Now you can run and check it. I hope it can help you...