Laravel 9/8 integrate fullcalendar using ajax tutorial. In this tutorial will completely guide you 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 app.
FullCalendar is a lightweight yet powerful and developer-friendly JavaScript library to create flexible, draggable event calendars on the modern web app. Note that the FullCalendar now works as a Vanilla (ES6) JavaScript since v4, which removes jQuery and moment as dependencies.
As well as, in tutorial you will learn you step by step on how to integrate fullcalendar in laravel 8 pp.
Create Dynamic Events in Laravel 9, 8 using Fullcalendar and jQuery AJAX Example
Just follow the following steps to create dynamic events in fullcalendar using ajax with laravel 9, 8 apps:
- 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 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_events_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 9 fullcalendar tutorial, You have successfully learned how to integrate the fullcalendar in laravel 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.
