title: How to filter events based on select value on FullCalendar V5?
body: <p>I've just tried FullCalendar plugin for the first time, so i went with Version 5.</p>
  <p>I just want to filter visible events by selecting value in a select dropdown.</p>
  <p>I can't seem to find a simple and efficient way to do this with V5.</p>
  <p>Many ressources that i found on internet talk about using rererenderEvents or refetchEvents but it refers to previous version of plugin and this is not working here.</p>
  <p>I found a workaround by looping through the events and changing the visibility with setProp, but it doesn't look very good. I have a lot of events and the for loop takes several seconds (code in comment in snippet)</p>
  <p>Thank you very much for your advice and help</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function() {
  
    let currentDayDate = new Date().toISOString().slice(0, 10);
  
    let calendarEl = document.getElementById('calendar');
  
    let calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'timeGridWeek',
      firstDay: 1,
      hiddenDays: [ 0, 6 ],
      slotMinTime: '07:00',
      slotMaxTime: '20:00',
          allDaySlot: false,
      headerToolbar: {
        left: 'prev,today,next',
        center: 'title',
        right: 'timeGridDay,timeGridWeek'
      },
      views: {
        timeGridWeek: {
          type: 'timeGrid',
          duration: { days: 2 },
          buttonText: '2 day'
        }
      },
     events: [{
        "title": "Marc",
        "start": currentDayDate + " 07:30",
        "end": currentDayDate + " 08:30",
        "userId": "1"
      }, {
        "title": "Tom",
        "start": currentDayDate + " 09:30",
        "end": currentDayDate + " 10:30",
        "userId": "2"
      }, {
        "title": "David",
        "start": currentDayDate + " 11:30",
        "end": currentDayDate + " 12:30",
        "userId": "3"
      }]
  });
    calendar.render();
    
  //  $( document ).ready(function() {
  //   $('#selector').on('change',function(){            
  //     var events = calendar.getEvents();
  //     for (var i = events.length - 1; i &gt;= 0; i--) {
  //       if ($("#selector").val() == events[i].extendedProps.userId || $("#selector").val() == "all") {
  //         events[i].setProp("display", "block");
  //       }
  //       else {
  //         events[i].setProp("display", "none");
  //       }
  //     }
  //   });
  // });
    
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select id="selector"&gt;
      &lt;option value="all"&gt;All&lt;/option&gt;
      &lt;option value="1"&gt;Marc&lt;/option&gt;
    &lt;option value="2"&gt;Tom&lt;/option&gt;
    &lt;option value="3"&gt;David&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="calendar"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>