Use Case Scenario:
A custom Laravel web application requires an integrated calendar app within the application that users can Add, Edit and Delete calendar events within the application. Using FullCalendar addresses this requirement.
In this final part of the 4-part tutorial, we will create a delete event functionality within our Laravel application. FullCalendar is a powerful and lightweight JavaScript calendar library used to create dynamic calendars in your web application.
Instructions:
Add a delete button in the Event edit modal
<a href="#" class="btn btn-danger btn-sm" id="delevent" data-id>Delete</a>Update the fullcalendar script and add an ajax delete function
$(document).on('click','#delevent',function(){
var id = events.event.id;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
method: 'post',
url: '{{route('mycalendar.deleteevent')}}',
data: {id:id},
success: function(response) {
$('#eventEdit').modal('hide');
calendar.refetchEvents();
},
});
});Create a route for the delete function
Route::post('/calendar/mycalendar/deleteevent', [EventController::class, 'deleteevent'])->name('mycalendar.deleteevent');In EventController, add a delete function to delete the event in our events table
public function deleteevent(Request $request)
{
$id = $request->id;
DB::table("events")->where('id',"=",$id)->delete();
return response()->json([
'success' => true
]);
}
FullCalendar Tutorial Series:
