This guide will provide an outline on integrating a set of input filters with an instance of FullCalendar and DataTables on the same page.
Don’t forget to add the `table-filters` class to your filter elements.
The filters are standard inputs, except these are not inside a form element, instead, this data will be sent via AJAX.
<div class="form-group">
<label for='title'>{{ __('Title') }}</label>
<input class="form-control table-filters" id='title' type="text" name="title" value="{{ old('title', request('title')) }}">
</div>
<div class="form-group">
<label for='status_id'>{{ __('Status') }}</label>
<select name="status_id" class="form-control select2Ajax table-filters" id="status_id" data-url="{{ route('admin.ajax.statuses.search') }}">
<option value=""></option>
</select>
</div>
Here is a simplified example of our main initialisation for our FullCalendar instance.
const calendarElement = document.getElementById('calendar');
const bookingsCalendar = new FullCalendar.Calendar(calendarElement, {
headerToolbar: {
start: 'prev,next today',
center: 'title',
end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: {
url: '{{ route('admin.ajax.bookings.get-calendar') }}',
method: 'GET',
extraParams: function() {
/*
Here we will grab the values of each of our filter input
These will then be sent to the server
*/
return {
title: $('[name="title"]').val(),
status_id: $('[name="status_id"]').val(),
};
}
},
});
This is our simplified DataTable setup.
const bookingsTable = $('#bookings-table').DataTable({
processing: true,
serverSide: true,
responsive: true,
searching: false,
ajax: {
url: '{{ route('admin.ajax.bookings.get-table') }}',
data: function(data) {
// this is the equivalent of the 'extraParams' method used in FullCalendar
data.title = $('[name="title"]').val();
data.status_id = $('[name="status_id"]').val();
}
},
columns: [
{ data: 'title' },
{ data: 'status' },
]
});
Finally, we need to listen for updates on our filters, when we detect a change we will then manually reload the calendar and table with the updated data parameters.
$('.table-filters').on('change keyup', function() {
bookingsTable.draw();
bookingsCalendar.refetchEvents().render();
});
Subscribe to my newsletter for the latest updates on my books and digital products.
Find posts, tutorials, and resources quickly.
Subscribe to my newsletter for the latest updates on my books and digital products.
