Part 2. Add Events and Display in Full Calendar
In Part 2, you will be able to add an event using a modal and display it in the Calendar.
We will use the latest version of FullCalendar 6.1.10 and DateRangePicker to select the date and time of the event.
FullCalendar is a powerful and lightweight JavaScript calendar library used to create dynamic calendars in your web application.
Add a modal inside the mycalendar.blade.php. The modal will be use for user to Add an Event
<div class="modal fade" id="eventAdd" role="dialog" data-dismiss="modal" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content bg-light ">
<div class="modal-header bg-gray">
<div class="card-title">Add Event</div>
</div>
<form id="addEventSubmit" type="post" target="#">
{{ csrf_field() }}
<div class="card-body text-black p-4">
<div class="row mb-3 pl-4 pr-4">
<div class="col-md-12">
<label for="title" >Title</label>
<input id="title" type="text" name="title" class="form-control" autofocus>
</div>
</div>
<div class="row mb-3 ">
<div class="col-md-12">
<table class="table table-bordered">
<tr>
<td>Date Range
<input type="text" name="rangepick" class="form-control daterange" /></td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="addvent" class="btn btn-sm btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
Add Button to activate the modal
<a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#eventAdd">Add Event</a>
Add Javascript code to enable Bootstrap DateRangePicker
<script type="text/javascript">
$(function() {
$('input[name="rangepick"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'YYYY-MM-DD HH:mm'
}
});
});
</script>
Add a Javascript to get the input field data when submitting the form
<script>
$(document).ready(function(){
$(document).on('submit','#addEventSubmit',function(){
$.ajax({
method: 'post',
url: '{{route('mycalendar.addevent')}}',
data: $('#addEventSubmit').serialize(),
success: function(response) {
},
});
});
});
</script>
Add Route for addevent
Route::post('/calendar/mycalendar/addevent', [EventController::class, 'addevent'])->name('mycalendar.addevent');
Create addevent() function inside EventController to store the event in your Database
public function addevent(Request $request)
{
$title = $request->input("title");
$range = $request->input("rangepick");
$dates = explode(' - ', $range);
$start_datetime = Carbon::parse($dates[0]);
$end_datetime = Carbon::parse($dates[1]);
$event = new Event();
$event->title = $title;
$event->start = $start_datetime;
$event->end = $end_datetime;
$event->save();
return response()->json([
'success' => true,
'data' => $event
]);
}
Add Route to get the events
Route::get('getevents', [EventController::class, 'getevents'])->name('getevents');
Create getevents() function inside EventController to display the Events in your calendar
public function getevents(Request $request){
$events = Event::whereDate('start', '>=', $request->start)
->whereDate('end', '<=', $request->end)
->get();
return response()->json($events);
}
Update your FullCalendar script to display the events in the calendar
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
editable: true,
displayEventTime:true,
displayEventEnd:true,
events:'{{route('getevents')}}'
});
calendar.render();
});
</script>