Question

我正在使用eventRender在FullCalendar上创建我的活动。然后，我运行eventAfterAllRender以根据每个事件的类动态创建复选框。例如，事件可能如下所示：

活动HTML

<td class="fc-event-container filterable-item">
  <a class="group1-red group2-smith group3-tuesday" href="#">
    <div class="fc-content">
       <!-- generated automatically -->
    </div>
  </a>
</td>

在渲染事件之后，我的函数将查看以group#-开头的类，拆分该部分并生成值等于类的复选框。这些复选框如下所示：

复选框HTML

<li>
  <input class="content__criteria" type="checkbox" name="group1" id="group1-red" data-identifier="red">
  <label for="group1-red">Red</label>
</li>

以下是我的问题开始的地方，我通过在我的Checkbox Change事件处理程序上调用RerenderEvents来过滤我的事件。

复选框呼叫

$('.content__criteria').on('change', function(e){
  $('#calendar').fullCalendar('rerenderEvents');
});

当这个重新渲染时，它会破坏我的重新登记复选框，然后破坏我的日历。我正在寻找一种方法，我可以确保eventAfterAllRender只计算第一次渲染，或者一次加载。

这是我应用的精简版：

$('#calendar').fullCalendar({
      header: {
          left: '',
          center: 'title',
          right: ''
      },
      eventRender: function (event, eventElement){
        // adds classes to calendar events
        // adds array to handle the show and hide of the elements
      }, 
      eventAfterAllRender: function(view){
        // code to dynamically generate checkboxes
        generateCheckboxes();
      }
});

我知道的事情： - 我知道我的过滤方法有效，因为当我在

中有硬编码复选框时它正在工作

我知道我创建一个对象数组（显示，vs hide）的功能正在运行
我知道eventAfterAllRender每次点击复选框都在运行

我需要帮助的事情

将eventAfterAllRender的方法设置为仅运行一次（不是每次都eventRender或rerenderEvents。

感谢您的任何帮助！谢谢！

Answer 1

每次日历更新时，您都无法停止触发eventAfterAllRender回调，但您可以设置一个简单的标志来阻止您自己的复选框功能执行多次：

checkboxesGenerated = false; //initialise flag variable

$('#calendar').fullCalendar({
      header: {
          left: '',
          center: 'title',
          right: ''
      },
      eventRender: function (event, eventElement){
        // adds classes to calendar events
        // adds array to handle the show and hide of the elements
      }, 
      eventAfterAllRender: function(view){
        // code to dynamically generate checkboxes, only runs if the flag is false
        if (checkboxesGenerated == false) {
          checkboxesGenerated = true; //set the flag for future reference
          generateCheckboxes();
        }
      }
});

完整的Calendar.io - 只在加载时执行我的`eventAfterAllRender`

1 个答案: