0

使用 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”（Screech Powers）时，应根据我的代码显示。好吧，至少，这就是我现在想要做的。

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

我曾经对我的资源使用 URL 请求：'ajax_get_json.php?what=schedule_providers_at_location'，它运行良好！所有资源都会正确显示它们的事件。我只是想通过使用菜单来根据需要显示/隐藏资源来修改它。

4

1 回答 1

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

    }

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

为了在加载时显示默认资源，我将其添加到我的 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();
                }
            }
        }

    },

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

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

我目前唯一的问题是，当调用 toggleResource 函数时，全天垂直时间块边界与调度程序的其余部分不对齐。一旦我开始导航，他们就会这样做，但我不明白为什么在初始加载或调用 toggleResource() 时它看起来像这样：

在此处输入图像描述

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

于 2019-06-25T01:25:25.897 回答