In this final part of the 4-part tutorial, we will create a delete event functionality within our FullCalendar.
FullCalendar is a powerful and lightweight JavaScript calendar library used to create dynamic calendars in your web application.
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
]);
}