Laravel 8 FullCalendar Ajax Tutorial with Example

Laravel 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 8 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 8 using Fullcalendar and jQuery AJAX Example

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_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']);

Recommended:- Laravel 8 Highcharts Example Tutorial

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>

Recommended:- Laravel 8 Generate Fake Data

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.

Live Demo