Laravel 6 FullCalendar Tutorial

Laravel 6 , Laravel

Nicesnippets

32163

07-11-2019


Laravel 6 FullCalendar Tutorial

hii guys,

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','FullCalendarEventMasterController@index');

Route::post('/fullcalendareventmaster/create','FullCalendarEventMasterController@create');

Route::post('/fullcalendareventmaster/update','FullCalendarEventMasterController@update');

Route::post('/fullcalendareventmaster/delete','FullCalendarEventMasterController@destroy');

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 - NiceSnippets.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.....


Recommended Posts