Question

使用Fullcalendar 4，我试图使用选择菜单显示/隐藏我的资源。当用户从菜单中选择一个提供程序时，我只想显示一个资源的事件。

在我的全日历上方，有我的选择菜单：

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

我正在包括的fullcalendar.php页面上使用ajax调用来收集所需的资源。我将它们存储在一个对象中，然后尝试控制屏幕上显示哪些资源：

 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}]

...以上是可以选择/呈现的正确资源。这样看来还可以。

在页面加载时，当应根据我的代码显示资源ID为“ 1”（尖叫力）时，根本不显示任何资源。好吧，至少，这就是我现在要做的。

菜单更改时，资源将显示/隐藏，但不会基于所选内容；仅显示菜单中所选内容的逻辑似乎不起作用。

我曾经使用URL请求来访问我的资源：'ajax_get_json.php？what = schedule_providers_at_location'，并且效果很好！然后，所有资源都会正确显示其事件。我只是想通过使用菜单根据需要显示/隐藏资源来对其进行修改。

Answer 1

这是到目前为止我正在做的事情！万一有人碰到这篇文章，这会有所帮助。

这是我的完整日历代码之前的代码。

    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());
    });

我的ID为“ 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();

    }

这将导致资源正确显示和隐藏。如果用户选择“全部显示”也可以！

为了在加载时显示默认资源，我将其添加到我的全日历脚本中：

        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();
                }
            }
        }

    },

我正在使用initial_load的布尔变量来查看页面是否刚刚加载（基本上没有页面刷新就不加载数据）。 initial_load = true的布尔值是在DOMContentLoaded之外设置的

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

我唯一的当前问题是，当调用toggleResource函数时，整天的垂直时间块边界与调度程序的其余部分不一致。一旦我开始导航，它们就会执行操作，但是我不明白为什么在初次加载时或调用toggleResource（）时看起来像这样：

关于如何纠正全天垂直区块对齐的任何想法？

全日历使用资源作为选择菜单的功能

1 个答案: