Javascript 使用选择项筛选完整日历事件

我有一个完整的日历插件来存储医生的预约，我希望在开始时显示所有预约，但我希望咨询室asistant可以使用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>

这是一个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']);
}

---

我不知道这是不是最好的选择，或者是否存在某种客户端过滤或简单的过滤方法这不是构造客户端代码的最简单方法

根据fullCalendar的文档，您可以配置事件提要，以便运行自定义AJAX请求，从而很容易按照需要的方式构造URL。无论何时发出事件请求，都可以执行此操作

e、 g.就你而言：

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的“更改”事件处理程序只需告诉日历：

您还需要修改您的HTML选择，以便有一个“全部”选项，以便这可以是初始默认值，并且如果用户希望：

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

按医生筛选：
--全部--
医生1
医生2
医生3

您可以这样做：

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

            ],

---

不清楚，你是说这段代码有问题，还是你在问是否有其他方法来实现它？@ADyson上面的代码没有问题，我只是不知道如何完成

$。ajax

成功渲染事件过滤器工作正常，做得很好

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

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

            ],