`i want to show event on my fullcalendar by filtring by id_service

here is my concontroller, i convert the event to array and get them by callendrier`

> public function callendrier($id_service)
    {
        $services= Service::all();
        if($id_service==0){
            $conge = Conge::all();
        }else{
            $conge = Conge::where('serv_id','=',$id_service)->get();
        }
        return $conge;
        // $this->eventsToArray(Conge::all());
    }
    public function eventsToArray($conges)
    {
        $eventArray = [];
        foreach($conges as $conge){
            $data = [ 
                'id' =>$conge->id,
                "title" => $conge->employe->nom_emp,
                "type" =>$conge->typeconge->type,
                "dure_conge" => $conge->dure_conge,
                "start" => $conge->start_date,
                "end" => $conge->end_date  ,
                "remplacant" => $conge->remplacant, 
                "solde_conge" => $conge->solde_conge, 
                "color"=>$conge->color,
                "employes"=>$conge->employe_id,
                "id_service"=>$conge->employe->poste->serv_id,
                "textColor" => "white"
            ];
            array_push($eventArray,$data);
        }
        return response()->json($eventArray); 
    }

and i dont know how to get only the event id_service that i selectes on my dropdown ,please any help

$(document).ready(function() {
        var calendarEl = document.getElementById('fcalendar')
        let id_service = document.querySelector("#select_service");
        var calendar = new FullCalendar.Calendar(calendarEl, {
            //events : '/callendrier',
            events: function(fetchInfo, successCallback, failureCallback) {
                            var id_service = $('#select_service').val();
                            console.log(id_service)
                            $.ajax({
                                type:"GET",
                                url:"{{url('/callendrier')}}"  (id_service != "" ? '/'   id_service : ""),
                            }).done(function(data) {
                                successCallback(data); //use the supplied callback function to return the event data to fullCalendar
                            }).fail(function(jqXHR, textStatus, errorThrown) { 
                                failureCallback(jqXHR);
                            });
                    },   


  calendar.render();
        $('#select_service').change(function() {
                    calendar.refetchEvents();
                    //console.log(id_service)
                    });
    ```

CodePudding user response：

To filter the events on your FullCalendar using a dropdown in Laravel, you can use the onChange event of the dropdown to trigger an AJAX call to your controller's callendrier() method. The callendrier() method can then retrieve the events that match the selected value from the dropdown and return them as an array of JSON objects.

Here is an example of how you can do this:

First, add a dropdown element to your view that contains the list of services:

<select id="filter-services">
  <option value="0">All services</option>
  @foreach($services as $service)
    <option value="{{ $service->id }}">{{ $service->name }}</option>
  @endforeach
</select>

Next, add a JavaScript script to your view that listens for changes to the dropdown and makes an AJAX call to the callendrier() method when the dropdown value changes:

<script>
  // Listen for changes to the filter-services dropdown
  document.getElementById("filter-services").addEventListener("change", function() {
    // Get the selected value from the dropdown
    var selectedValue = this.value;

    // Make an AJAX call to the callendrier() method, passing the selected value as a parameter
    $.ajax({
      url: "{{ url('/callendrier') }}/"   selectedValue,
      type: "GET",
      success: function(response) {
        // When the callendrier() method returns the events, update the FullCalendar with the filtered events
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('addEventSource', response);
      }
    });
  });
</script>

Finally, modify your callendrier() method to return the events that match the selected service:

public function callendrier($id_service)
{
  $services= Service::all();
  if($id_service==0){
    $conge = Conge::all();
  }else{
    $conge = Conge::where('serv_id','=',$id_service)->get();
  }
  return $this->eventsToArray($conge);
}

In the code above, the callendrier() method first retrieves all the services and all the events. If the selected service is "All services" (i.e. $id_service is 0), it returns all the events. Otherwise, it returns only the events that match the selected service.

After making these changes, the events on your FullCalendar should be filtered based on the selected value in the dropdown.

CodePudding user response：

it give me this error when i give the route an id differnet to 0 i guess because conge and service are two table and this is how i get the id_service

"id_service"=>$conge->employe->poste->serv_id,