Hello Developer,
In this section, we will explore how to create an Event Calendar in Laravel. We’ll cover the steps to set up a calendar where users can manage events easily. This includes adding, editing, and deleting events, providing a seamless experience for tracking schedules. Let’s dive into the process and learn how to implement an event calendar using Laravel!
Event Calendar in Laravel, In this tutorial, we will walk through the Laravel FullCalendar example. We’ll see how to create a basic CRUD example using FullCalendar in Laravel and talk about using it with AJAX. This guide will also show you how to handle event clicks in FullCalendar. Just follow the steps to complete this simple Laravel FullCalendar tutorial.
Event Calendar in Laravel 10
Event Calendar in Laravel is a helpful tool for managing your daily events. You can quickly add, edit, delete, and create events, making it easy to stay organized. It offers a dynamic way to keep track of your schedule, and if you need to make changes to an event, you can do it effortlessly.
How to Create Event Calendar in Laravel 10?
Let’s follow a few simple steps to create a Laravel event calendar.
Step 1: Install Laravel
Step 2: Create Migration and Model
Step 3: Create Controller
Step 4: Create Routes
Step 5: Create Blade File
Run Laravel App
Step 1: Install Laravel
If you haven’t installed Laravel, use the following command to create a new Laravel project:
composer create-project --prefer-dist laravel/laravel EventCalender
Step 2: Create Migration and Model
In this step, we’ll create a migration for the events table using the Laravel 8 Artisan command. First, run the following command:
php artisan make:migration create_events_table
After running this command, you’ll find a file in the “database/migrations” folder. Insert the following code into your migration file to create the events table.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateEventsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('events', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->date('start');
$table->date('end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('events');
}
}
Then after, simply run the migration:
php artisan migrate
After creating the “events” table, you need to create an Event model. First, create a file at “app/Models/Event.php” and add the following content to the Event.php file:
app/Models/Event.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Event extends Model
{
use HasFactory;
protected $fillable = [
'title', 'start', 'end'
];
}
Step 3: Create Controller File
Now, you need to create a CalendarController to handle the index and AJAX methods. To do this, run the following command:
php artisan make:controller CalenderController
Open CalendarController.php file and put below code in that file.
app/Http/Controllers/CalenderController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Event;
use Illuminate\Http\JsonResponse;
class CalenderController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
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('calender');
}
/**
* Write code on Method
*
* @return response()
*/
public function ajax(Request $request): JsonResponse
{
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:
# code...
break;
}
}
}
Note: You can modify the code according to your specific requirements.
Step 4: Create Routes
In this step, we will add routes for the controller methods. First, include the following route in your routes.php
file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CalenderController;
Route::controller(CalenderController::class)->group(function(){
Route::get('calender', 'index');
Route::post('calenderAjax', 'ajax');
});
Step 5: Create Blade File
Create views for listing, creating, and editing events:
<!DOCTYPE html>
<html>
<head>
<title>How to Create Event Calendar in Laravel 10 - Deepcoding.info</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">
<h1>How to Create Event Calendar in Laravel 10 - Deepcoding.info</h1>
<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 + "/calender",
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 + "/calenderAjax",
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 + '/calenderAjax',
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 + '/calenderAjax',
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>
Output —
This step-by-step guide has provided you with the essential knowledge needed to easily integrate FullCalendar into your Laravel application.
You have successfully built a dynamic event management system that enables users to add, edit, and delete events using Laravel