Laravel 8 FullCalendar Ajax Tutorial Example

Laravel 8 FullCalendar Ajax Tutorial Example

Laravel 8 integrate fullcalendar using ajax tutorial. In this tutorial, you will learn 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.

This tutorial will completely guide you step by step on how to integrate fullcalendar in laravel 8 pp.

Laravel 8 Integrate Fullcalendar Example Tutorial

  • 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_users_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 + '&amp;start=' + start + '&amp;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 + '&amp;start=' + start + '&amp;end=' + end + '&amp;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: "&amp;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 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.

Recommended Laravel Posts

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *