Question

我要制作的是一个筛选器按钮，当用户单击它时，键入资源名称，然后将看到仅与资源名称匹配的事件。首先，将渲染所有事件。然后，当用户单击搜索按钮时，仅查看与用户键入的资源匹配的事件。我通过使用removeEvents来做到这一点，它会删除所有不满足条件的事件。但是，问题是，在搜索一次之后，如果用户键入了另一个资源名称，则不会查看任何事件，因为已经删除了用户搜索的事件。因此，我在removeEvents之前添加refetchEvents。但是，这一次，不会删除任何事件，并且由于refetchEvents会查看所有事件，即使我在removeEvents之前键入了它也是如此。这是代码

myCustomButton1: {
              text: 'filter by resource',

              click: function() {

                $("#calendar").fullCalendar('refetchEvents');
                var teachername = prompt("type the name of teacher");
                var teacherlist = <?php echo $json_array8; ?>;
                var exist = false;
                if(prompt)
                {   


                    for(var i = 0; i < teacherlist.length ; i++)
                    {
                        if(teacherlist[i]["courseTeacher"] == teachername)
                        {
                            exist = true;
                        }

                    }
                }
                if(!exist)
                {
                    alert("check the resource name.");
                }
                else
                {

                    $('#calendar').fullCalendar('removeEvents', function (calEvent) {
                                if(calEvent.resourceId != teachername)
                                {
                                    return true;
                                }else
                                {
                                    return false;
                                }

                        });

                }
             }
            }

Answer 1

请勿使用removeEvents。根据文档（https://fullcalendar.io/docs/removeEvents），removeEvents会从日历对象中完全删除事件。这就是为什么当您输入新的搜索字符串时找不到事件的原因。

相反，您可以在eventRender回调中使用element.hide（）和element.show（）。

eventRender: function(event, element){
    var teacherlist = <?php echo $json_array8; ?>;
    if(prompt)
    {   


        for(var i = 0; i < teacherlist.length ; i++)
        {
            if(teacherlist[i]["courseTeacher"] == teachername)
            {
                exist = true;
            }

        }
    }

    if(exist)
    {
        element.hide();
    }
    else
    {
        element.show();
    }

}

注意：使用show / hide的缺点是在月视图中，fullcalendar的工作方式是将事件呈现在表结构中。因此，如果隐藏事件，事件将不会“流动”，因此，它们之间将存在一些空白，这看起来像是渲染问题。要获得显示效果，您将别无选择，只能使用新的eventSource重新渲染所有事件。一种简单的方法是确保您使用的eventSource进行ajax调用。您可以确保在ajaxCall中传递搜索字符串并在ajax文件中进行处理。返回的值将是您要呈现的已过滤事件。由于reRenderEvents可能在内部调用，因此您不会在这里看到显示问题。同样，此特定方法的缺点是，每次要过滤日历事件时，都必须进行ajax调用。

单击custombutton时事件的完整日历执行顺序

1 个答案: