add an filter by ressource for fullcalender sheduler

Question

i using the premium version and i want integrate the fullcalendar to hotel room booking system , so i use resource Event solution as room number and i have on resource type of room.. I want create select field in my html to can filtring events by ressource (type room) I have this code:

   document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'xxxxxxxxxxxxxxxxx',
     height: 'auto',
     locale: 'it',
     timeZone: 'Europe/Rome',
      now: "<?php echo date('Y-m-d')?>",
      editable: false, // enable draggable events
     // aspectRatio: 1.8,
      //allDaySlot:true,
     // allDayDefault: true,
     // scrollTime: '00:00', // undo default 6am scrollTime
      headerToolbar: {
        left: 'today prev,next',
        center: 'title',
       right: 'resourceTimelineWeek,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
      },
      initialView: 'resourceTimelineTenDay',
     views: {
      resourceTimelineWeek: {
      
        slotDuration: '12:00'
      },
      resourceTimelineTenDay: {
        type: 'resourceTimeline',
        duration: { days: 10 },
        buttonText: '10 gg',
        slotDuration: '12:00'
      },
         resourceTimelineYear: {
            buttonText: 'Anno', 
         }
    },
      resourceAreaHeaderContent: 'Rooms',
  resourceAreaWidth: '20%',
    resourceAreaColumns: [
    
      {
        field: 'title',
        headerContent: 'Numero'
      },
      {
        field: 'type',
        headerContent: 'Type'
      }
    ],
   resourceOrder: '-type,title', // when occupancy tied, order by title
     resources: { // you can also specify a plain string like 'json/resources.json'
        url: '/calendar/rooms',
        failure: function() {
          document.getElementById('script-warning').style.display = 'block';
        }
      },

      events: { // you can also specify a plain string like 'json/events-for-resources.json'
        url: '/calendar/reservations',
        failure: function() {
          document.getElementById('script-warning').style.display = 'block';
        }
      }
    });

    calendar.render();
  });

and Json resource event have this structure:

 [{"id":3,"title":"A1","type":"Single"},{"id":4,"title":"B1","type":"Double"},{"id":6,"title":"A2","type":"Single"}]

and Json event have this structure:

{"id":79,"resourceId":4,"start":"2022-04-26T14:00:00","end":"2022-04-27T12:00:00","title":"azerty","allDay":false,"backgroundColor":"green","borderColor":"green"},{"id":78,"resourceId":3,"start":"2022-04-26T14:00:00","end":"2022-04-29T12:00:00","title":"wael hammouda","allDay":false,"backgroundColor":"green","borderColor":"green"},{"id":77,"resourceId":3,"start":"2022-04-25T14:00:00","end":"2022-05-01T12:00:00","title":"wael hammouda","allDay":false,"backgroundColor":"green","borderColor":"green"},{"id":76,"resourceId":4,"start":"2022-04-25T14:00:00","end":"2022-05-01T12:00:00","title":"wael hammouda","allDay":false,"backgroundColor":"green","borderColor":"green"},{"id":75,"resourceId":6,"start":"2022-04-28T14:00:00","end":"2022-04-30T12:00:00","title":"wael hammouda","allDay":false,"backgroundColor":"green","borderColor":"green"}]

So I want add on my html page an select filter so user choose and room type (as single, Double) and will see list booking where his room type is same as selected.. How i can do this?

thanks..