Laravel 10/9 FullCalendar example; Through this tutorial, i am going to show you how to implement fullcalendar in Laravel 10/9 using jQuery ajax.
Also, i will write easy jQuery ajax code for Laravel 10/9 full calendar crud operation. As well as include jQuery library of fullcalendar, which is used to perform add/edit/delete operation on fullcalendar.
Integrate FullCalendar with Ajax in Laravel 10/9
Use following steps to implement fullcalendar in Laravel 10/9 using jQuery ajax:
- Step 1 – Installing Laravel 10/9 Application
- Step 2 – Database Configuration
- Step 3 – Creating Fullcalendar Event Model & Migration
- Step 4 – Create Routes
- Step 5 – Creating Controller
- Step 6 – Create Blade View
- Initialize Full Calendar On Blade View
- Create jQuery Ajax Method for FullCalendar CRUD
- Step 7 – Start Development Server
- Step 8 – Run This App On Browser
Step 1 – Installing Laravel 10/9 Application
In step 1, open your terminal and navigate to your local web server directory using the following command:
//for windows user cd xampp/htdocs //for ubuntu user cd var/www/html
Then install Laravel 10/9 latest application using the following command:
composer create-project --prefer-dist laravel/laravel Laravel9FullCalendar
Step 2 – Database Configuration
In step 2, open your downloaded laravel app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Creating Fullcalendar Event Model & Migration
In step 3, open command prompt and navigate to your project by using the following command:
cd / Laravel9FullCalendar
Then create model and migration file by using the following command:
php artisan make:model Event -m
The above command will create two files into your laravel ajax fullcalendar tutorial app, which is located inside the following locations:
- /app/Models/Event.php
- /database/migrations/create_events_table.php
So, find create_events_table.php file inside /database/migrations/ directory. Then open this file and add the following code into function up() on this file:
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->dateTime('s_date');
$table->dateTime('e_date');
$table->timestamps();
});
}
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 4 – Create Routes
In step 4, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FullCalendarController;
Route::get('fullcalendar', [FullCalendarController::class, 'index']);
Route::post('create-event', [FullCalendarController::class, 'create']);
Route::post('event-update', [FullCalendarController::class, 'update']);
Route::post('event-delete', [FullCalendarController::class, 'delete']);
Step 5 – Creating Controller
In step 5, create ajax fullcalendar controller by using the following command:
php artisan make:controller FullCalendarController
The above command will create FullCalendarController.php file, which is located inside /app/Http/Controllers/ directory.
So open FullCalendarController.php file and add the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Event;
use response;
class FullCalendarController 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 step 6, create new blade view file that named fullcalendar.blade.php inside resources/views directory.
- Initialize Full Calendar On Blade View
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10/9 Ajax Fullcalendar CRUD Example Tutorial - LaraTutorials.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></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>
</head>
<body>
<div class="container">
<div class="response"></div>
<div id='full-calendar'></div>
</div>
</body>
</html>
- Create jQuery Ajax Method for FullCalendar CRUD
<script>
$(document).ready(function () {
var SITEURL = "{{url('/')}}";
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#full-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 + "event-create",
data: 'title=' + title + '&start=' + start + '&end=' + end,
type: "POST",
success: function (data) {
showMSG("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 + 'event-update',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
showMSG("Updated Successfully");
}
});
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: SITEURL + 'event-delete',
data: "&id=" + event.id,
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', event.id);
showMSG("Deleted Successfully");
}
}
});
}
}
});
});
//FOR SHOW MESSAGES
function showMSG(message) {
$(".response").html("<div class='success'>"+message+"</div>");
setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
Full source code of fullcalendar.blade.php file is given below:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10/9 Ajax Fullcalendar CRUD Example Tutorial - LaraTutorials.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></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>
</head>
<body>
<div class="container">
<div class="response"></div>
<div id='full-calendar'></div>
</div>
<script>
$(document).ready(function () {
var SITEURL = "{{url('/')}}";
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#full-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 + "event-create",
data: 'title=' + title + '&start=' + start + '&end=' + end,
type: "POST",
success: function (data) {
showMSG("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 + 'event-update',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
showMSG("Updated Successfully");
}
});
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: SITEURL + 'event-delete',
data: "&id=" + event.id,
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', event.id);
showMSG("Deleted Successfully");
}
}
});
}
}
});
});
//FOR SHOW MESSAGES
function showMSG(message) {
$(".response").html("<div class='success'>"+message+"</div>");
setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
</body>
</html>
Step 7 – Start Development Server
Finally, open your command prompt again and run the following command to start development server for your Laravel 10/9 ajax fullcalendar example:
php artisan serve
Step 8 – Run This App On Browser
In step 8, open your browser and fire the following url into your browser:
http://127.0.0.1:8000/fullcalendar
Be First to Comment