Filter FullCalendar and DataTables

Dan Sherwood

Javascript Tutorials HTML

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 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('') }}">
        <option value=""></option>

FullCalendar setup

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(),

DataTable setup

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' },

Listening for filter actions

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() {


Fathom Analytics $10 discount on your first invoice using this link

Help support the blog so that I can continue creating new content!


Fathom Analytics $10 discount on your first invoice using this link

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2006 - 2024 DC Blog. All code MIT license. All rights reserved.