Полный календарь с использованием ресурсов в качестве функции с меню выбора - PullRequest
Новая
       19

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

0 голосов
/ 24 июня 2019

Используя 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», и он работал нормально!Все ресурсы показывают тогда их события должным образом.Я просто пытаюсь изменить его, используя меню, чтобы показать / скрыть ресурсы по мере необходимости.

1 Ответ

0 голосов
/ 25 июня 2019

Вот что я делаю, чтобы сделать это до сих пор!Если кто-то когда-нибудь сталкивается с этим сообщением, это поможет.

Вот мой код перед моим полным календарем. 

    var resourceData = [];
    var visibleResourceIds = [];

    $.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
                });

            });
        });


    $('#toggle_providers_calendar').change(function() {
        toggleResource($('#toggle_providers_calendar').val());
    });

Мое меню выбора с идентификатором 'toggle_providers_calendar' совпадает с моим оригиналомсообщение.Мои ресурсы полного календаря как функция также одинаковы.

После отображения календаря внесены изменения, которые я внес в функцию переключения ресурсов: 

    // menu button/dropdown will trigger this function. Feed it resourceId.
    function toggleResource(resourceId) {
        visibleResourceIds = [];

        //if select all...  see if undefined from loading on initial load = true
        if ((resourceId == '') || (resourceId === undefined)) {

            $.map( resourceData, function( value, index ) {
                 visibleResourceIds.push(value.id);
            });

        }

      var index = visibleResourceIds.indexOf(resourceId);
      if (index !== -1) {
        visibleResourceIds.splice(index, 1);
      } else {
        visibleResourceIds.push(resourceId);
      }

      calendar.refetchResources();

    }

Это заставит ресурсы отображатьсяи правильно спрятаться.Если пользователь выбирает «Показать все», это тоже работает!

Чтобы показывать ресурс по умолчанию при загрузке, я добавляю это в свой скрипт fullcalendar: 

        loading: function(bool) {

        if (bool) {
            //insert code if still loading
            $('.loader').show();
        } else {
            $('.loader').hide();

            if (initial_load) {
                initial_load = false;
                //code here once done loading and initial_load = true                 
                var default_resource_to_show = "<?php echo $default_provider; ?>";
                if (default_resource_to_show) {
                    //set the menu to that provider and trigger the change event to toggleresrource()
                    $('#toggle_providers_calendar').val(default_provider).change();
                } else {
                    //pass in nothing meaning 'select all' providers for scheduler to see
                    toggleResource();
                }
            }
        }

    },

Я используюbool переменная initial_load, чтобы видеть, была ли страница только что загружена (в основном не загружает данные без обновления страницы).Bool of initial_load = true установлен вне DOMContentLoaded 

<script>
//show selected date in title box
var initial_load = true;
 document.addEventListener('DOMContentLoaded', function() {

Моя единственная текущая проблема заключается в том, что когда вызывается функция toggleResource, вертикальные границы дневного временного блока не совпадают с остальной частью планировщика,Как только я начинаю навигацию, они делают, но я не понимаю, почему это выглядит при начальной загрузке или когда вызывается toggleResource ():

enter image description here

Есть мысли о том, как исправить выравнивание дневных вертикальных блоков?

...