Fullcalendar使用资源作为选择菜单的功能 [英] Fullcalendar using resources as a function with select menu

问题描述

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

Using Fullcalendar 4, I am trying to show/hide my resources using a select menu. When the user selects one of the providers from a menu, I want to only show that one resourc's events.

在我的全部日历上，有我的选择菜单:

Above my fullcalendar I have my select menu:

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

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

I am gathering the resources I need using an ajax call on my included fullcalendar.php page. I am storing them in an object and then trying to control which resources are shown onscreen:

 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).一旦收集到控制台中的信息，便是:

To make sure the getJSON is working, I have console.log(resourceData). The information in the console once it's gathered is:

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

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

... the above are the correct resources that can be chosen/rendered. So that seems to be okay.

在页面加载时，当应根据我的代码显示资源ID为"1"(尖叫力)时，根本不会显示任何资源.好吧，至少，这就是我现在要做的.

On page load, no resources show at all, when resource id of '1' (Screech Powers) should be shown per my code. Well, at least, that's what I am trying to do right now.

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

When the menu changes, resources will show/hide, but not based on what's selected; the logic of only showing what is selected in the menu doesn't seem to be working.

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

I used to use a URL request for my resources: 'ajax_get_json.php?what=schedule_providers_at_location', and it worked fine! All resources show then their events properly. I am just trying to modify it by using a menu to show/hide the resources as needed.

推荐答案

这是到目前为止我正在做的事情！如果有人曾经浏览过此帖子，这会有所帮助.

Here's what I'm doing to make it happen so far! In case someone comes across this post ever, this will help.

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

Here's my code before my fullcalendar code.

    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'的选择菜单与我的原始帖子相同.我的全部日历资源在功能上也是相同的.

My select menu with id 'toggle_providers_calendar' is the same as my original post. My fullcalendar resources as a function is the same too.

呈现日历后，这是我对切换资源功能所做的更改:

After the calendar is rendered, here are the changes I made to my toggle resources function:

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

    }

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

This causes the resources to show and hide properly. If the user selects "Show All" that works too!

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

In order to have a default resource show on load, I add this to my fullcalendar script:

        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之外

I am using a bool variable of initial_load to see if the page was just loaded (basically not loading data without a page refresh). The bool of initial_load = true is set outside of DOMContentLoaded

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

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

My only current problem is that when toggleResource function is called, the all day vertical time block boundaries don't line up with the rest of the scheduler. Once I start navigating, they do, but I don't understand why it looks like this on initial load or when toggleResource() is called:

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

Any thoughts on how to correct the alignment of the allday vertical blocks?

这篇关于Fullcalendar使用资源作为选择菜单的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！