How to Integrate a Full Calendar in Laravel 6 Application?

How to Integrate a Full Calendar in Laravel 6 Application?

In this Laravel 6 tutorial, you'll learn how to integrate a full calendar in Laravel 6 Application. We will learn how to add, update and delete an event on the calendar using ajax.

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.

Step 1: Install Laravel Project

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

Step 2: Setup Database

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 

Step 3: Create Migration & Model

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','[email protected]');

Route::post('/fullcalendareventmaster/create','[email protected]');

Route::post('/fullcalendareventmaster/update','[email protected]');

Route::post('/fullcalendareventmaster/delete','[email protected]');

Step:4 Create Controller

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

    }    





}

Step:5 Create View File

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>

Step:6 Run Development Server

you need to run the development server.

 php artisan serve

It will help you.....

laravel php web-development ajax

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

PHP Web Application Development Company

As a top **PHP Web Application Development Company in USA**[https://www.dataeximit.com/php-development-services/](https://www.dataeximit.com/php-development-services/ "https://www.dataeximit.com/php-development-services/"), we at Data EximIT have...

PHP Website Development

Skenix Infotech is a leading PHP Web Development Company that helps companies get results with industry best practices. Get affordable PHP Development Services.

Laravel Development Company

Skenix Infotech is a top Laravel Website Development Company with Expert Laravel Developers that provides robust Laravel Development Services at fair costs.

Php how to delete multiple rows through checkbox using ajax in laravel

In this article i will let you know to delete multiple rows through checkbox using ajax in laravel and before delete we will give a confirmation message.

Hire Dedicated PHP Developer

Looking to hire affordable yet experienced PHP developers? **[Hire Dedicated PHP Developer](https://hourlydeveloper.io/hire-dedicated-php-developer/ "Hire Dedicated PHP Developer")**, who can convert your idea to reality, within the stipulated...