使用 select 过滤 fullcalendar 事件

Question

I have a fullcalendar plugin to store doctor's appointments I want at the beginning to show all appointments, but I want the consulting room asistant can filter beetween doctors to display only its corresponding appointments using an html select

<label for="">Filter by doctor:</label>
<select class="form-control col-4 mb-4" name="select_doctor" id="select_doctor">
  <option value="1">Doctor 1</option>
  <option value="2">Doctor 2</option>
  <option value="3">Doctor 3</option>
</select>

this is the callendar definition

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  themeSystem: 'bootstrap',
  titleFormat:{
    hour12: true
  },
  locale: 'es',
  bootstrapFontAwesome: false,
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  },
  events:"{{ url('/agenda/show/') }}"
});
calendar.render();

this is the ajax call where is supposed to get the filtered data

$('#select_doctor').change(function(){
  var id_doctor = $('#select_doctor').val();

  $.ajax({
    type:"GET",
    url:"{{url('/agenda/show/')}}"+'/'+id_doctor,
    success:function(response){
  
    },
    error: function (err) {

    }
  });
});

this is the route

Route::get('/agenda/show/{id?}', 'AppointmentController@show')->name('appointment-show');

this is the controller function

public function show($id){
  if($id != "null"){

    $data['calendar_doctors']=CalendarDoctor::where('doctor_id', $id)->get();

  }else{

    if(Auth::user()->hasRole('doctor')){

      $data['calendar_doctors']=CalendarDoctor::where('doctor_id', Auth::user()->id)->get();
    
    }else{
    
      $data['calendar_doctors']=CalendarDoctor::all();
    
    }

  }
        
  return response()->json($data['calendar_doctors']);
}

I don't know if this is the best option or there is some sort of client-side filtering or an easy way to filter

Answer 1

This isn't the simplest way to structure your client-side code.

As per fullCalendar's events as a function documentation, you can configure the event feed so that you can run a custom AJAX request, so it's easy to structure the URL the way you need it. This can be done whenever a request for events is made.

eg in your case:

events: function(fetchInfo, successCallback, failureCallback) {
  var id_doctor = $('#select_doctor').val();

  $.ajax({
    type:"GET",
    url:"{{url('/agenda/show/')}}"+ (id_doctor != "" ? '/' + id_doctor : ""),
  }).done(function(data) {
    successCallback(data); //use the supplied callback function to return the event data to fullCalendar
  }).fail(jqXHR, textStatus, errorThrown) { 
    failureCallback(jqXHR);
  });
}

Then the "change" event handler for your select simply needs to tell the calendar to refresh the events from the server :

$('#select_doctor').change(function() {
  calendar.refetchEvents();
});

You also need to amend your HTML select so there's an "all" option, so that this can be the initial default, and so the user can toggle back to it if they want to:

<label for="">Filter by doctor:</label>
<select class="form-control col-4 mb-4" name="select_doctor" id="select_doctor">
  <option value="">-- All --</option>
  <option value="1">Doctor 1</option>
  <option value="2">Doctor 2</option>
  <option value="3">Doctor 3</option>
</select>

Answer 2

You can do like this:

           eventSources: [

                // your event source
                {
                url: '{{ url("/agenda/show/") }}',
                method: 'GET',
                extraParams: {
                    select_doctor: $('#select_doctor').val(),
                    custom_param2: 'somethingelse'
                },
                failure: function() {
                    alert('there was an error while fetching events!');
                },
                //color: 'yellow',   // a non-ajax option
                //textColor: 'black' // a non-ajax option
                }

                // any other sources...

            ],