单击自定义按钮时事件的完整日历执行顺序

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调用。