时间戳

首页 > 解决方案 > 使用选择过滤全日历事件

javascript - 使用选择过滤全日历事件

问题描述

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

这是 callendar 定义

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

我不知道这是否是最好的选择，或者有某种客户端过滤或一种简单的过滤方法

标签： javascriptajaxlaravelfullcalendarfullcalendar-5

解决方案

这不是构建客户端代码的最简单方法。

根据 fullCalendar 的events as a function文档，您可以配置事件提要，以便您可以运行自定义 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 选择，以便有一个“全部”选项，以便这可以成为初始默认值，因此用户可以根据需要切换回它：

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

推荐阅读