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 + '&start=' + start + '&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 + '&start=' + start + '&end=' + end + '&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: "&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
If you want to remove public or public/index.php from URL In laravel, Click Me
Conclusion
Laravel 8 fullcalendar tutorial, You have successfully learned how to integrate the fullcalendar in laravel 8 app. As well as how to show, add, update, and delete events on fullcalendar in laravel 8 app.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
