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

Question

What I am trying to make is a filter button that when user click it, and type the resource name, then the events that only match with the resource name is seen. At first, all of the events are rendered. then, when user click the search button, then only the events that match with the resource that user typed is viewed. I make this by using removeEvents, which remove all the events that didn't satisfy the condition. However, the problem is, after searching one time, if user typed another resource name, then no events are viewed, because the events that user searched is already removed. Thus, I add refetchEvents before removeEvents. However, this time, no events are removed, and all of the events are viewed because of refetchEvents, even if I typed it before the removeEvents. Here is the code

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

Do not use removeEvents. As per the documentation ( https://fullcalendar.io/docs/removeEvents ), removeEvents completely removes the events from the calendar object. Which is why you do not find the events when you type in a new search string.

Instead what you could do is use element.hide() and element.show() in the eventRender callback.

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

}

Note: The downside to using show/hide is that in the month view, the way fullcalendar works is that it renders the events in a table structure. So if you hide an event the events do not 'flow up' and as such, you will have some empty gaps in between which may look like a rendering issue. To get by this display you issue, you will have no choice but to re-render all the events using a new eventSource. One easy method is to ensure that the eventSource you use makes an ajax call. You can ensure that in your ajaxCall you pass your search string and do the processing in your ajax file. The returned value will be the filtered events that you want to be rendered. You wont get a display issue here as reRenderEvents is possibly called internally. Again, the downside to this particular method is that you would have to make ajax calls everytime you want to filter the calendar events.