Laravel 8 FullCalendar Ajax Tutorial Example

Laravel 8 integrate fullcalendar using ajax tutorial. In this tutorial, you will learn how to integrate a fullcalendar in your laravel 8 app. And as well as how to create, edit, update and delete events on fullcalendar in laravel 8 app.

This tutorial will completely guide you step by step on how to integrate fullcalendar in laravel 8 pp.

Laravel 8 Integrate Fullcalendar Example Tutorial

  • Step 1 – Install Laravel App
  • Step 2 – Connecting App to Database
  • Step 3 – Build Migration & Model
  • Step 4 – Add Routes
  • Step 5 – Create Controller Using Artisan Command
  • Step 6 – Create Blade View
  • Step 7 – Run Development Server
  • Step 8 – Test This App

Step 1 – Install Laravel App

First of all, open terminal and execute the following command on terminal to install or download Laravel 8 app:

composer create-project --prefer-dist laravel/laravel blog

Step 2 – Connecting App to Database

In this step, open .env and configure database details for connecting app to database:

 DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Step 3 – Build Migration & Model

In this step, execute the following command on terminal to create event model and migration file:

php artisan make:model Event -m

This command will create one model name Event and also create one migration file for the Events table.

After successfully run the command, Navigate to database/migrations folder and open create_events_table.php file. Then update the following code into create_users_table.php file, as follow:

<?php use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration; class CreateEventsTable extends Migration
{ /** * Run the migrations. * * @return void */ public function up() { Schema::create('events', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->dateTime('start'); $table->dateTime('end'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('events'); }
}

Now, execute the following command on terminal to create the tables into database:

php artisan migrate

Step 4 – Add Routes

In this step, Create two routes and add in web.php file. So, visit /routes directory and open web.php file. Then add the following routes into it:

use App\Http\Controllers\FullCalendarController; Route::get('ckeditor', [FullCalendarController::class, 'index']);
Route::post('fullcalendar/create', [FullCalendarController::class, 'create']);
Route::post('fullcalendar/update', [FullCalendarController::class, 'update']);
Route::post('fullcalendar/delete', [FullCalendarController::class, 'destroy']);

Step 5 – Create Controller Using Artisan Command

In this step, execute the following command on terminal to create a controller name FullCalendarController.php file:

php artisan make:controller FullCalendarController

After successfully create controller, visit app/http/controllers directory and open FullCalendarController.php file.

<?php namespace App\Http\Controllers; use App\Models\Event;
use Illuminate\Http\Request;
use Redirect,Response; class FullCalenderController extends Controller
{ public function index() { if(request()->ajax()) { $start = (!empty($_GET["start"])) ? ($_GET["start"]) : (''); $end = (!empty($_GET["end"])) ? ($_GET["end"]) : (''); $data = Event::whereDate('start', '>=', $start)->whereDate('end', '<=', $end)->get(['id','title','start', 'end']); return Response::json($data); } return view('fullcalendar'); } public function create(Request $request) { $insertArr = [ 'title' => $request->title, 'start' => $request->start, 'end' => $request->end ]; $event = Event::insert($insertArr); return Response::json($event); } public function update(Request $request) { $where = array('id' => $request->id); $updateArr = ['title' => $request->title,'start' => $request->start, 'end' => $request->end]; $event = Event::where($where)->update($updateArr); return Response::json($event); } public function destroy(Request $request) { $event = Event::where('id',$request->id)->delete(); return Response::json($event); } }

Step 6 – Create Blade view

In this step, Visit the resources/views directory and create a blade view file named fullcalendar.blade.php. And add the following code into it:

<!DOCTYPE html>
<html>
<head> <title>Laravel Fullcalender Add/Update/Delete Event Example Tutorial - Tutsmake.com</title> <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/

[email protected]

/dist/fullcalendar.min.css" /> <script src="https://cdn.jsdelivr.net/npm/

[email protected]

/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/

[email protected]

/dist/fullcalendar.min.js"></script>
<body> <div class="container"> <div class="response"></div> <div id='calendar'></div> </div> </body>
</html>
Put the script on fullcalendar.blade.php, after the closing of the body tag
<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 + "fullcalendar",
displayEventTime: true,
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 HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: SITEURL + "fullcalendar/create",
data: 'title=' + title + '&amp;start=' + start + '&amp;end=' + end,
type: "POST",
success: function (data) {
displayMessage("Added Successfully");
}
});
calendar.fullCalendar('renderEvent',
{
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 HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: SITEURL + 'fullcalendar/update',
data: 'title=' + event.title + '&amp;start=' + start + '&amp;end=' + end + '&amp;id=' + event.id,
type: "POST",
success: function (response) {
displayMessage("Updated Successfully");
}
});
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: SITEURL + 'fullcalendar/delete',
data: "&amp;id=" + event.id,
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', event.id);
displayMessage("Deleted Successfully");
}
}
});
}
}
});
});
function displayMessage(message) {
$(".response").html("<div class='success'>"+message+"</div>");
setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>

Step 7 – Run Development Server

In this step, execute the following command on terminal to start development server:

 php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080

Step 8 – Test This App

Now, open browser and hit the following url on it:

http://localhost:8000/fullcalendar

Related Posts