In this blog, we have share with you Fullcalendar working example with Laravel 8 application. That means in this post you can find how to implement JavaScript Fullcalendar plugin in Laravel 8 framework. So by using FullCalendar, we can display our daily events or tasks and we can also schedule our event or task by using FullCalendar plugin.
Under this Laravel 8 tutorial with FullCalendar using Ajax. So in this tutorial, you can learn how to use fullcalendar in Laravel 8 application with Ajax so you can perform all operation on single page without refresh of web page. So in this tutorial you can learn how to create, edit or update and delete events in Laravel 8 framework with Fullcalendar using ajax.
This post will give you complete guide on how to integrate fullcalendar with Ajax in Laravel application. For this things you have to follow below steps.
Tutorial on FullCalendar Integration in Laravel 8
- Download Laravel Framework
- Mysql Database Connection
- Create Migration & Model File
- Create Controller Class
- Create Blade View File
- Add Routes for Controller Method
- Run Laravel Application
Step 1 : Download Laravel Framework
First of all, we want to download and install Laravel 8 application, so for this open terminal and run the following command in terminal for download and install Laravel 8 framework.
composer create-project --prefer-dist laravel/laravel laravel-fullcalender
Step 2: Mysql Database Connection
In second step we want to make database connection with Laravel application, so we have to open .env file and define database configuration details for connect Laravel application with database.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=
Step 3 : Create Migration & Model File
In this step, we want to create migration file for create table in our database and then after we want to create Model class file for perform database related operation.
First for create migration file, we have to run following command in terminal for created migration file.
php artisan make:migration create_events_table
This command will create one migration file under database/migrations directory. So we have to open that file and define table column defination for create table in database.
database/migrations/2021_03_05_051820_create_events_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateEventsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->dateTime('start');
$table->dateTime('end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('events');
}
}
?>
Next, we have to create Event.php model class file under app/Models folder and under that file we have to define table column name which you can find below.
app/Models/Event.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Event extends Model
{
use HasFactory;
protected $fillable = [
'title', 'start', 'end'
];
}
?>
After this, we want to run following command in terminal and after successfully run below command it will creates events table into database.
php artisan migrate
Step 4 : Create Controller Class
Under this step, we want to create Controller class, so for this we want to run following command in command prompt for create a controller name FullCalendarController.php file.
php artisan make:controller FullCalenderController
After successfully run above command, it will create FullCalendarController.php controller class file in app/Http/Controllers folder, so we have to open that file.
app/Http/Controllers/FullCalendarController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Event;
class FullCalenderController extends Controller
{
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('full-calender');
}
public function action(Request $request)
{
if($request->ajax())
{
if($request->type == 'add')
{
$event = Event::create([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end
]);
return response()->json($event);
}
if($request->type == 'update')
{
$event = Event::find($request->id)->update([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end
]);
return response()->json($event);
}
if($request->type == 'delete')
{
$event = Event::find($request->id)->delete();
return response()->json($event);
}
}
}
}
?>
Under this file, first we want to import Event model class for database related operation. Under this file we have to make following two method.
index(Request $request) : This is root method of this class. This method will load full-calender.blade.php file in browser, and this method will also received ajax request for fetch event data from database and send to ajax request in json format.
action(Request $request) : This another method under this controller class. This method has mainly received ajax request for create event, update existing event details and remove event from database.
Step 5 : Create Blade View File
Under this step, we have to go into resources/views folder and then after we have to create new blade file with named full-calender.blade.php and under this file we have to add following code. Under this code you can also find JavaScript code for load event, create event, update event and delete event code with ajax request.
resources/views/full-calender.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Use Fullcalendar in Laravel 8</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>
</head>
<body>
<div class="container">
<br />
<h1 class="text-center text-primary"><u>How to Use Fullcalendar in Laravel 8</u></h1>
<br />
<div id="calendar"></div>
</div>
<script>
$(document).ready(function () {
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events:'/full-calender',
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:"/full-calender/action",
type:"POST",
data:{
title: title,
start: start,
end: end,
type: 'add'
},
success:function(data)
{
calendar.fullCalendar('refetchEvents');
alert("Event Created Successfully");
}
})
}
},
editable:true,
eventResize: 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');
var title = event.title;
var id = event.id;
$.ajax({
url:"/full-calender/action",
type:"POST",
data:{
title: title,
start: start,
end: end,
id: id,
type: 'update'
},
success:function(response)
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated Successfully");
}
})
},
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');
var title = event.title;
var id = event.id;
$.ajax({
url:"/full-calender/action",
type:"POST",
data:{
title: title,
start: start,
end: end,
id: id,
type: 'update'
},
success:function(response)
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated Successfully");
}
})
},
eventClick:function(event)
{
if(confirm("Are you sure you want to remove it?"))
{
var id = event.id;
$.ajax({
url:"/full-calender/action",
type:"POST",
data:{
id:id,
type:"delete"
},
success:function(response)
{
calendar.fullCalendar('refetchEvents');
alert("Event Deleted Successfully");
}
})
}
}
});
});
</script>
</body>
</html>
Step 6 : Add Routes for Controller Method
Under this step, we have to create route for index() and action() method of FullCalenderController.php controller class. For add routes under Laravel 8 framework, we have to open routes/web.php file and then after add the following routes into it, which you can find below.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FullCalenderController;
Route::get('/', function () {
return view('welcome');
});
Route::get('full-calender', [FullCalenderController::class, 'index']);
Route::post('full-calender/action', [FullCalenderController::class, 'action']);
?>
Step 7 : Run Laravel Application
In last steps, we have to run following command in terminal for start Laravel development server.
php artisan serve
After run above command, we want to check output in browser, so for this we have to hit following url in browser.
http://127.0.0.1:8000/full-calender
Lastly, This is Laravel 8 fullcalendar tutorial, and here you can successfully learn how can we integrate fullcalendar in Laravel 8 framework with Ajax and as well as here we have load, create, edit and remove events from fullcalendar using Ajax in Laravel 8 application.
Thanks,
ReplyDeletePlease do you share source code?
le calenderier n'apparu pas
ReplyDeleteThank you for sharing this. Is there any page that tells us how to create, delete, and edit events in this full-calendar?
ReplyDelete