23 February, 2021

Laravel 8 FullCalendar Ajax Tutorial Example

           ,      No comments   

 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
Recommended:- Laravel 8 – Dynamically Multiple Add or Remove Input Fields using jQuery

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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:

1
2
3
4
5
6
7
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']);
Recommended:- Laravel 8 Highcharts Example Tutorial

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?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);
    }   
 
 
}
Recommended:- Laravel 8 Livewire CRUD with Jetstream Tutorial

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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/fullcalendar@3.9.0/dist/fullcalendar.min.css" />
 
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
 
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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>
Recommended:- Laravel 8 Generate Fake Data

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


Meta

Popular Posts

  • Laravel - Configuration
    In the previous chapter, we have seen that the basic configuration files of Laravel are included in the  config  directory. In this chapte...
  • Laravel - Namespaces
    Namespaces are used in various programming languages to create a separate group of variable, functions and classes. A program may contain ...
  • HTML Introduction
    Introduction to Hypertext Markup Language (HTML) A way to present HTML information in a beautiful and attractive way in the World Wide ...
  • Tutorials of Laravel Overview
    Introduction Laravel is an open-source PHP framework, which is robust and easy to understand. It follows a model-view-controller design ...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...

Categories

Social Media Links

Blog Archive

Laravel News

Loading...