Laravel 8 fullcalendar CRUD events article, In this article, we are able to profoundly simplify how to add FullCalendar in Laravel 8 application to create and delete events the usage of Fullcalendar JavaScript event calendar plugin.
FullCalendar is a wonderful, powerful, and lightweight JavaScript calendar plugin in general used to create dynamic, draggable event calendars on modern web applications.
FullCalendar package helps jQuery AJAX and manages your events smoothly, and you could spruce it up visually as it offers easy customization. This comprehensive guide, little by little, explains the way to add and integrate FullCalendar in Laravel now not only however additionally the way to use FullCalendar inside the Laravel application.
here equal step for create laravel Fullcalendar CRUD applications follow the below steps:
Step 1: Create Laravel App
Step 2: Configuration of 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
first of all we want to get clean and new Laravel eight version application the use of bellow command, now open your terminal OR command prompt and then fire bellow command and run it(However, you may ignore this step if the app is already created):
composer create-project --prefer-dist laravel/laravel full-calendar-demo
ensure to get into the app folder:
cd full-calendar-demo
second step, we configure database like database name, username, password and many others for CRUD utility of laravel. permit's open .env file and fill full details same as bellow:
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)
We want to create the events table into the database and add some values related to events, so execute the subsequent command to generate the migration and model file.
php artisan make:model CrudEvents -m
next, you need to open the app/models/CrudEvents.php file and create a $fillable
array and define the crud events values.
CrudEvents.php
<?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'
];
}
further, add event_name, event_start and event_end values within the database/migrations/create_crud_events_table.php file.
create_crud_events_table.php
<?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');
}
}
Plus, propel the migration into the database, so run the command...
php artisan migrate
We want to create a new calendar to handle create, read, update and delete events, run the given below command to generate a new controller file.
php artisan make:controller CalenderController
Then, create two functions inside the app\Http\Controllers\CalenderController.php file, this could installation view and perform CRUD operations for fullcalendar events.
CalenderController.php
<?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;
}
}
}
Now that controller has been setup, subsequent pass to routes/web.php file, on this file we need to apply the CalenderController to create the routes.
routes/web.php
<?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']);
finally, we need to show the entire calendar in the laravel blade view file, make the jQuery AJAX request to create, read, update and delete events. For that, we take the help of our full calendar APIs that we have created inside the preceding step.
Open resources/views/welcome.blade.php file and replace the complete code with the advised below code...
welcome.blade.php
<!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 - laravelcode.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 - laravelcode.com</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>
Head over to the terminal, open the terminal window subsequent, type the php artisan command with serve tag to start the laravel development server.
php artisan server
Open any browser, kind the endorsed url on the address bar and check the fullcalendar crud events app.
http://127.0.0.1:8000/calendar-event
i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to replace character inside a string in JavaScript
Use the JavaScript replace() method Y...Laravel 8 Roles and Permissions Tutorial
User management is important feature in...Laravel 7 - Dynamically Add Input Fields using HandlebarsJs
Hello Artisan In this tutorial i will...Tilt.js Tiny Parallax tilt effect for jQuery
Tilt.js is a tiny requestAnimationFrame...How to get the position of an element relative to the document using jQuery
Use the jQuery offset() method...