Laravel fullcalendar crud events tutorial; In this tutorial, we'll show you how to use the FullCalendar JavaScript event calendar plugin to create and cancel events in your Laravel app.
FullCalendar is a fantastic, robust, and lightweight JavaScript calendar plugin for creating dynamic, draggable event calendars in modern web applications.
The FullCalendar package supports jQuery AJAX and efficiently organises your events, plus it's visually appealing thanks to its easy modification.
This step-by-step tutorial shows you how to incorporate and integrate FullCalendar in Laravel, as well as how to use FullCalendar in the Laravel app.
How to Make Fullcalendar CRUD Events in Laravel 9
Table of Content
- Step 1: Create Laravel App
- Step 2: Connect to Database
- Step 3: Set Up Migration and Model
- Step 4: Generate and Configure Controller
- Step 5: Create and Add Routes
- Step 6: Create Blade View
- Step 7: Run Development Server
Step 1 - Create Laravel App
It's great if you have composer installed on your machine because it will allow you to install the new laravel application. If the app has already been created, you can skip this step.
composer create-project --prefer-dist laravel/laravel full-calendar-demoMake that you're in the app folder:
cd full-calendar-demoStep 2 - Connect to Database
The first thing we do after entering the inside app is open the .env file and add the database details to the ENV configuration file in order to link the laravel project to the database.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=Step 3 - Set Up Migration and Model
To build the migration and model file, run the following command to create the events table in the database and add some values related to events.
php artisan make:model CrudEvents -mAfter that, enter the app/Models/CrudEvents.php file and declare the crud events values in a $fillable array.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class CrudEvents extends Model
{
use HasFactory;
protected $fillable = [
'event_name',
'event_start',
'event_end'
];
}In the database/migrations/create_crud_events_table.php file, add values for event name, event start, and event end.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCrudEventsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('crud_events', function (Blueprint $table) {
$table->id();
$table->string('event_name');
$table->date('event_start');
$table->date('event_end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('crud_events');
}
}Run the following command to push the migration into the database:
php artisan migrateStep 4 - Generate and Configure Controller
To construct a new calendar that can handle creating, reading, updating, and deleting events, use the command below to generate a new controller file.
php artisan make:controller CalenderControllerThen, inside the app\Http\Controllers\CalenderController.php file, build two functions that will set up the view and conduct CRUD activities for fullcalendar events.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\CrudEvents;
class CalenderController extends Controller
{
public function index(Request $request)
{
if($request->ajax()) {
$data = CrudEvents::whereDate('event_start', '>=', $request->start)
->whereDate('event_end', '<=', $request->end)
->get(['id', 'event_name', 'event_start', 'event_end']);
return response()->json($data);
}
return view('welcome');
}
public function calendarEvents(Request $request)
{
switch ($request->type) {
case 'create':
$event = CrudEvents::create([
'event_name' => $request->event_name,
'event_start' => $request->event_start,
'event_end' => $request->event_end,
]);
return response()->json($event);
break;
case 'edit':
$event = CrudEvents::find($request->id)->update([
'event_name' => $request->event_name,
'event_start' => $request->event_start,
'event_end' => $request->event_end,
]);
return response()->json($event);
break;
case 'delete':
$event = CrudEvents::find($request->id)->delete();
return response()->json($event);
break;
default:
# ...
break;
}
}
}Step 5 - Create and Add Routes
Now that the controller has been set up, we can continue on to the routes/web.php file, where we will establish the routes using the CalenderController.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CalenderController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('calendar-event', [CalenderController::class, 'index']);
Route::post('calendar-crud-ajax', [CalenderController::class, 'calendarEvents']);Step 6 - Create Blade View
Finally, in the laravel blade view code, we must display the entire calendar and make a jQuery AJAX request to create, read, update, and delete events. We use our entire calendar APIs, which we developed in the previous phase, to accomplish this.
Replace the entire code in the file resources/views/welcome.blade.php with the following:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create Fullcalender CRUD Events in Laravel</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
</head>
<body>
<div class="container mt-5" style="max-width: 700px">
<h2 class="h2 text-center mb-5 border-bottom pb-3">Laravel FullCalender CRUD Events Example</h2>
<div id='full_calendar_events'></div>
</div>
{{-- Scripts --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
$(document).ready(function () {
var SITEURL = "{{ url('/') }}";
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#full_calendar_events').fullCalendar({
editable: true,
editable: true,
events: SITEURL + "/calendar-event",
displayEventTime: true,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function (event_start, event_end, allDay) {
var event_name = prompt('Event Name:');
if (event_name) {
var event_start = $.fullCalendar.formatDate(event_start, "Y-MM-DD HH:mm:ss");
var event_end = $.fullCalendar.formatDate(event_end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: SITEURL + "/calendar-crud-ajax",
data: {
event_name: event_name,
event_start: event_start,
event_end: event_end,
type: 'create'
},
type: "POST",
success: function (data) {
displayMessage("Event created.");
calendar.fullCalendar('renderEvent', {
id: data.id,
title: event_name,
start: event_start,
end: event_end,
allDay: allDay
}, true);
calendar.fullCalendar('unselect');
}
});
}
},
eventDrop: function (event, delta) {
var event_start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
var event_end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");
$.ajax({
url: SITEURL + '/calendar-crud-ajax',
data: {
title: event.event_name,
start: event_start,
end: event_end,
id: event.id,
type: 'edit'
},
type: "POST",
success: function (response) {
displayMessage("Event updated");
}
});
},
eventClick: function (event) {
var eventDelete = confirm("Are you sure?");
if (eventDelete) {
$.ajax({
type: "POST",
url: SITEURL + '/calendar-crud-ajax',
data: {
id: event.id,
type: 'delete'
},
success: function (response) {
calendar.fullCalendar('removeEvents', event.id);
displayMessage("Event removed");
}
});
}
}
});
});
function displayMessage(message) {
toastr.success(message, 'Event');
}
</script>
</body>
</html>Step 7 - Run Development Server
To start the laravel development server, go to the terminal, open a terminal window, and type the php artisan command with the serve tag.
php artisan serveTo try the fullcalendar crud events app, open any browser and type the specified url into the address bar.
http://127.0.0.1:8000/calendar-eventConclusion
The laravel fullcalendar crud event tutorial is now complete; this example demonstrated how to use the FullCalendar plugin to create an event crud app.
We used the MySQL database to store and manage our events by creating a simple table in the database containing the event name, start date, and finish date.
We hope you enjoyed this tutorial and will tell others about it.
I hope you will like the content and it will help you to learn Laravel 9 FullCalendar Ajax Tutorial with Example
If you like this content, do share.
