Laravel Fullcalendar with Create, Update, Delete Event Functions
In this tutorial, we are going to implement Fullcalendar in Laravel application with all the functionalities like add event, update event, delete event and drag event.
Setting up the Project
First you need to create a new laravel project by running below command in your terminal
1
composer create-project laravel/laravel laravel-fullcalendar
1 | composer create-project laravel/laravel laravel-fullcalendar |
Then navigate to your project directory by using below command in your terminal
1 | cd laravel-fullcalendar |
Set up Database details
Now you need to configure your Database details in your .env
file.
1
2
3
4
5
6
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-fullcalendar
DB_USERNAME=root
DB_PASSWORD=
1 | DB_CONNECTION=mysql |
Create Migration
Now we need to create a migration file for our events table. Run below command in your terminal to create migration:
1
php artisan make:migration create_events_table
1 | php artisan make:migration create_events_table |
Then navigate to newly created migration file and add below code in it:
1 | <?php |
Then you need to run below command:
1 | php artisan migrate |
Now we have finished with our migration and now we need to work with Event model.
Create Model
Now we need to run below command to create Event
model in App\Models
directory:
1
php artisan make:model Event
1 | php artisan make:model Event |
Then you should navigate to newly created Event.php
file and add below code in it:
1 | <?php |
Create Controller
Now we need to create EventController which is going to hold all functions related to Fullclaendar and add following code on to that 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
57
58
59
60
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Event;
class EventController 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('welcome');
}
public function manageEvent(Request $request)
{
switch ($request->type) {
case 'add':
$event = Event::create([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end,
]);
return response()->json($event);
break;
case 'update':
$event = Event::find($request->id)->update([
'title' => $request->title,
'start' => $request->start,
'end' => $request->end,
]);
return response()->json($event);
break;
case 'delete':
$event = Event::find($request->id)->delete();
return response()->json($event);
break;
default:
break;
}
}
}
1 | <?php |
Create View
Add below code to your welcome.blade.php
file in resources/views
directory and paste below code in 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
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<title>Laravel Fullcalender Tutorial Tutorial</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
</head>
<body>
<div class="container">
<div id='calendar'></div>
</div>
<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 + "/",
displayEventTime: false,
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");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD");
$.ajax({
url: SITEURL + "/manage-event",
data: {
title: title,
start: start,
end: end,
type: 'add'
},
type: "POST",
success: function(data) {
displayMessage("Event Created Successfully");
calendar.fullCalendar('renderEvent', {
id: data.id,
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");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");
$.ajax({
url: SITEURL + '/manage-event',
data: {
title: event.title,
start: start,
end: end,
id: event.id,
type: 'update'
},
type: "POST",
success: function(response) {
displayMessage("Event Updated Successfully");
}
});
},
eventClick: function(event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: SITEURL + '/manage-event',
data: {
id: event.id,
type: 'delete'
},
success: function(response) {
calendar.fullCalendar('removeEvents', event.id);
displayMessage("Event Deleted Successfully");
}
});
}
}
});
});
function displayMessage(message) {
toastr.success(message, 'Event');
}
</script>
</body>
</html>
1 | <!DOCTYPE html> |
Create Route
Change your web.php
file according to this:
1
2
3
4
5
6
7
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EventController;
Route::get('/', [EventController::class, 'index']);
Route::post('/manage-event', [EventController::class, 'manageEvent']);
1 | <?php |
Run the application
To run your application run below command in your termial:
1
php artisan serve
1 | php artisan serve |
Then navigate to following URL:
1 | http://127.0.0.1:8000/ |
Conclusion
In this tutorial, we learned how to implement Fullcalendar in Laravel application with all the functionalities like add event, edit event & delete event. If you have any issue regarding this tutorial, mention your issue in comment section or reach me through my E-mail. You can obtainf the complete source code from this GitHub repository.
All articles on this blog are licensed under CC BY-NC-SA 4.0 unless otherwise stated.
Comments
GitalkDisqus