Laravel 8 Fullcalendar Ajax Tutorial with Example

Laravel 8 FullCalendar example tutorial; In this post, i would like to show you how to implement fullcalendar in laravel 8 using jQuery ajax.

Also, i will write easy jQuery ajax code for laravel 8 full calendar crud operation. As well as include jQuery library of fullcalendar, which is used to perform add/edit/delete operation on fullcalendar.

Using this example, you can easily integrate fullcalendar in laravel 8 using jQuery ajax.

Integrate FullCalendar with Ajax in Laravel 8

Steps to implement fullcalendar in laravel 8 using jQuery ajax:

Step 1 – Installing Laravel 8 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 8 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 8 latest application using the following command:

composer create-project --prefer-dist laravel/laravel Laravel8FullCalendar

Step 2 – Database Configuration

In step 2, open your downloaded laravel 8 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 / Laravel8FullCalendar

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 8 ajax fullcalendar tutorial app, which is located inside the following locations:

Laravel8FullCalendar/app/Models/Event.php
Laravel8FullCalendar/database/migrations/create_events_table.php

So, find create_events_table.php file inside Laravel8FullCalendar/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

Recommended:-Laravel 8 Ajax Image Upload Preview

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

Recommended:-Laravel 8 AJAX CRUD Tutorial

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 Laravel8FullCalendar/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 8 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 8 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 8 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