Полный календарь с использованием ресурсов как функции с меню выбора

Используя Fullcalendar 4, я пытаюсь показать/скрыть свои ресурсы с помощью меню выбора. Когда пользователь выбирает одного из поставщиков из меню, я хочу показать только события этого ресурса.

Над моим полным календарем у меня есть меню выбора:

<select id="toggle_providers_calendar" class="form-control" >
       <option value="1" selected>Screech Powers</option>
       <option value="2">Slater</option>
 </select>

Я собираю необходимые мне ресурсы, используя вызов ajax на моей включенной странице fullcalendar.php. Я сохраняю их в объекте, а затем пытаюсь контролировать, какие ресурсы отображаются на экране:

 document.addEventListener('DOMContentLoaded', function() {


    var resourceData = [];

    $.getJSON('ajax_get_json.php?what=schedule_providers_at_location',
        function(data) {
            $.each(data, function(index) {
                resourceData.push({
                    id: data[index].value,
                    title: data[index].text
                });
            });
        console.log(resourceData);
        });

    //below, set the visible resources to whatever is selected in the menu
    //using 1 in order for that to show at start
    var visibleResourceIds = ["1"];

    //below, get the selected id when the the menu is changed and use that in the toggle resource function
    $('#toggle_providers_calendar').change(function() {
        toggleResource($('#toggle_providers_calendar').val());
    });

    var calendar_full = document.getElementById('calendar_full');
    var calendar = new FullCalendar.Calendar(calendar_full, {
        events: {
            url: 'ajax_get_json.php?what=location_appointments'
        },
        height: 700,
        resources: function(fetchInfo, successCallback, failureCallback) {

                // below, I am trying to filter resources by whether their id is in visibleResourceIds.
                var filteredResources = [];

                filteredResources = resourceData.filter(function(x) {
                  return visibleResourceIds.indexOf(x.id) !== -1;
                });

                successCallback(filteredResources);

        },
       ...
       });

       // below, my toggle_providers_calendar will trigger this function. Feed it resourceId.
      function toggleResource(resourceId) {
        var index = visibleResourceIds.indexOf(resourceId);
        if (index !== -1) {
          visibleResourceIds.splice(index, 1);
        } else {
          visibleResourceIds.push(resourceId);
        }

        calendar.refetchResources();
      }

Чтобы убедиться, что getJSON работает, у меня есть console.log(resourceData). Информация в консоли после ее сбора:

[{id: '1', title: 'Screech Powers'}, {id: '2', title: 'Slater}]

... выше приведены правильные ресурсы, которые можно выбрать/рендерить. Так что, кажется, все в порядке.

При загрузке страницы ресурсы вообще не отображаются, когда идентификатор ресурса «1» (Screech Powers) должен отображаться в соответствии с моим кодом. Ну, по крайней мере, это то, что я пытаюсь сделать прямо сейчас.

При изменении меню ресурсы будут отображаться/скрываться, но не в зависимости от того, что выбрано; логика отображения только того, что выбрано в меню, похоже, не работает.

Раньше я использовал URL-запрос для своих ресурсов: «ajax_get_json.php?what=schedule_providers_at_location», и это работало нормально! Все ресурсы правильно отображают свои события. Я просто пытаюсь изменить его, используя меню, чтобы показать/скрыть ресурсы по мере необходимости.