Bootstrap 3
https://getbootstrap.com/docs/3.3/getting-started/
https://cdnjs.com/libraries/moment.js
The Most Popular JavaScript Calendar
https://fullcalendar.io/
https://cdnjs.com/libraries/fullcalendar/3.5.1
How to install laravel 9
https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel9
DB_USERNAME=root
DB_PASSWORD=
Creating Controller
php artisan make:controller FullCalendarController
C:\xampp\htdocs\laravel9\blog>php artisan make:controller FullCalendarController
change it with the following codes:
//blog\app\Http\Controllers\FullCalendarController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Event; //add Event Model
class FullCalendarController extends Controller
{
public function getEvent(){
if(request()->ajax()){
$start = (!empty($_GET["start"])) ? ($_GET["start"]) : ('');
$end = (!empty($_GET["end"])) ? ($_GET["end"]) : ('');
$events = Event::whereDate('start', '>=', $start)->whereDate('end', '<=', $end)
->get(['id','title','start', 'end']);
return response()->json($events);
}
return view('fullcalendar');
}
public function createEvent(Request $request){
$data = $request->except('_token');
$events = Event::insert($data);
return response()->json($events);
}
public function deleteEvent(Request $request){
$event = Event::find($request->id);
return $event->delete();
}
}
Creating Model php artisan make:model Event -m
C:\xampp\htdocs\laravel9\blog>php artisan make:model Event -m
This will create our model in the form of File.php file located : blog\app\Models\Event.php
we put -m when we create our model.
this will automatically make the migration for our model and you will see that in yourproject/database/migrations
blog\database\migrations\create_events_table.php
edit code blog\database\migrations\create_events_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class 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');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created successfully.
check database table
//blog\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_date','end_date'];
}
Creating Routesblog\routes\web.php
//blog\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
//Route::get('/', function () {
// return view('welcome');
//});
Route::get('/getevent', 'FullCalendarController@getEvent')->name('getevent');
Route::post('/createevent','FullCalendarController@createEvent')->name('createevent');
Route::post('/deleteevent','FullCalendarController@deleteEvent')->name('deleteevent');
Creating Views blog\resources\views\fullcalendar.blade.php
//blog\resources\views\fullcalendar.blade.php
<!doctype html>
<html lang="en">
<head>
<title>Laravel 9 Fullcalandar Jquery Ajax Create and Delete Event </title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.1/fullcalendar.min.js"></script>
</head>
<body>
<div class="container"><p><h1>Laravel 9 Fullcalandar Jquery Ajax Create and Delete Event </h1></p>
<div class="panel panel-primary">
<div class="panel-heading">
Laravel 9 Fullcalandar Jquery Ajax Create and Delete Event
</div>
<div class="panel-body" >
<div id='calendar'></div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
navLinks: true,
editable: true,
events: "getevent",
displayEventTime: false,
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 = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD');
var end = moment(end, 'DD.MM.YYYY').format('YYYY-MM-DD');
$.ajax({
url: "{{ URL::to('createevent') }}",
data: 'title=' + title + '&start=' + start + '&end=' + end +'&_token=' +"{{ csrf_token() }}",
type: "post",
success: function (data) {
alert("Added Successfully");
$('#calendar').fullCalendar('refetchEvents');
}
});
}
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: "{{ URL::to('deleteevent') }}",
data: "&id=" + event.id+'&_token=' +"{{ csrf_token() }}",
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Deleted Successfully");
}
}
});
}
}
});
});
</script>
</html>
Edit RouteServiceProvider.php blog\app\Providers\RouteServiceProvider.php
uncomment protected $namespace = 'App\\Http\\Controllers';
Run C:\xampp\htdocs\laravel9\blog>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
