In this example,I will show to you, how you can integrate a fullcalendar in laravel 6 application. I write step by step instruction of laravel 6 FullCalendar ajax example.
You will learn step by step how you can simply use a fullcalendar with its events. In this example, We will implement add an event, update event and delete event on the fullcalendar using ajax.
First, you need to download the laravel fresh setup. Use this command then download laravel project setup :
composer create-project --prefer-dist laravel/laravel blog
After successfully install laravel 6 Application, Go to your project .env file and set up database credential and move next step :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name
DB_USERNAME=here database username
DB_PASSWORD=here database password
Now you will create a table name event and it’s migration name create automatically. use this command in your terminal :
php artisan make:model Event -m
It command will create one model name Event and also create one migration file for the Events table.
<?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');
}
}
Next,this command use to in your terminal then this setup create to in your database.
php artisan migrate
Make Route
you can create to route in web.php file.
//fullcalender
Route::get('/fullcalendareventmaster','FullCalendarEventMasterController@index');
Route::post('/fullcalendareventmaster/create','FullCalendarEventMasterController@create');
Route::post('/fullcalendareventmaster/update','FullCalendarEventMasterController@update');
Route::post('/fullcalendareventmaster/delete','FullCalendarEventMasterController@destroy');
you need to create a controller name FullCalendarEventMasterController.this command use to your terminal.
php artisan make:controller FullCalendarEventMasterController
After create to methods:
The first method is index(), it will show you fullcalendar.
The second method is create(), it will store your events into the database.
The third method is update(), it will update your fullcalendar event into database.
The final method is destroy(), it will delete your events into the database and fullcalendar.
<?php
namespace App\Http\Controllers;
use App\Event;
use Illuminate\Http\Request;
use Redirect,Response;
class FullCalendarEventMasterController 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('fullcalender');
}
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);
}
}
In this step you need to create blade view file.
<!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://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" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<body>
<div class="container">
<div class="response"></div>
<div id='calendar'></div>
</div>
</body>
</html>
Put the script on list.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 + "/fullcalendareventmaster",
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 + "/fullcalendareventmaster/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 + '/fullcalendareventmaster/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 + '/fullcalendareventmaster/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("
"+message+"
");
setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
you need to run the development server.
php artisan serve
It will help you…
#laravel #php #web-development #ajax