Saturday 6 March 2021

How to Implement Fullcalendar in Laravel 8 using Ajax


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


  1. Download Laravel Framework
  2. Mysql Database Connection
  3. Create Migration & Model File
  4. Create Controller Class
  5. Create Blade View File
  6. Add Routes for Controller Method
  7. 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.





3 comments:

  1. Thanks,
    Please do you share source code?

    ReplyDelete
  2. le calenderier n'apparu pas

    ReplyDelete
  3. Thank you for sharing this. Is there any page that tells us how to create, delete, and edit events in this full-calendar?

    ReplyDelete