Фильтровать события полного календаря с помощью выбора

У меня есть плагин полного календаря для хранения назначений врача. Я хочу, чтобы в начале отображались все встречи, но я хочу, чтобы помощник в консультационном кабинете мог фильтровать врачей, чтобы отображать только соответствующие встречи, используя 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>

это определение календаря

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

это вызов ajax, где предполагается получить отфильтрованные данные

$('#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) {

    }
  });
});

это маршрут

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

это функция контроллера

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']);
}

Я не знаю, лучший ли это вариант, или есть какая-то фильтрация на стороне клиента или простой способ фильтрации


javascript ajax laravel fullcalendar fullcalendar-5
person Santiago Ramirez    schedule 23.12.2020    source источник
comment
Непонятно, вы говорите, что проблема с этим кодом, или вы спрашиваете, есть ли другой способ добиться этого?   -  person ADyson    schedule 23.12.2020
comment
@ADyson нет проблем с приведенным выше кодом, я просто не знаю, как завершить $.ajax успех, чтобы отобразить отфильтрованные события.   -  person Santiago Ramirez    schedule 23.12.2020

Ответы (2)


arrow_upward
2
arrow_downward

Это не самый простой способ структурировать клиентский код.

Согласно документации fullCalendar по события как функция, вы можете настроить ленту событий, чтобы запускать настраиваемый запрос AJAX, поэтому легко структурировать URL-адрес так, как вам нужно. Это можно сделать всякий раз, когда делается запрос на события.

например в твоем случае:

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);
  });
}

Затем обработчик события изменения для вашего выбора просто должен указать календарю обновить события с сервера:

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

Вам также необходимо изменить свой выбор HTML, чтобы была опция all, чтобы это могло быть начальным значением по умолчанию, и чтобы пользователь мог вернуться к нему, если они хотят:

<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>
person ADyson    schedule 24.12.2020
comment
отлично работаешь, отличная работа - person Sergio Teixeira; 21.04.2021

arrow_upward
0
arrow_downward

Вы можете сделать так:

           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...

            ],
person Henrique Freitas    schedule 10.05.2021