javascript - 全日历刷新/重新定义所有事件

Question

我有基于脚本标签的完整日历 this 。我的日历提供了将数据加载到引导模式中的 eventClick 函数:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      selectable: true,
      firstDay : 1,
      plugins: [ 'interaction', 'dayGrid'],
      defaultView: 'dayGridMonth',
      header: {
        left: 'today',
        center: 'title',
        right: 'prev, next',
      },
      events: [
        {% for event in main_events %}
            {
                client: '{{event.client.login}}',
                user: '{{event.user}}',
            },
        {% endfor %}
      ],
      eventClick: function(event) {
        $('#modal_window').modal();
        $('#modal_event_client').html(event.event.extendedProps.client);
        $('#modal_event_user').html(event.event.extendedProps.user);
        if (event.event.extendedProps.super_user_status == 'True') {
          $('#modal_subtask_names').html(event.event.extendedProps.subtask_names);
          $('#subtask_name').hide();
          $('#subtask_description').hide();
        }
        if (event.event.extendedProps.super_user_status == 'False') {
        $('#modal_subtask_name').html(event.event.extendedProps.subtask_name);
        $('#modal_subtask_description').html(event.event.extendedProps.subtask_description);
        $('#modal_subtask_comment').html(event.event.extendedProps.subtask_comment);
        $('#subtask_names').hide();
        }
      }
    });
    calendar.render();
  });
</script>

html:

<!-- Calendar-->
<div id='calendar'></div>

<!-- Modal -->
<div id="modal_window" class="modal fade bd-example-modal-sm">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal body -->
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row color">
                        <div class="col-4"><b>Client</b><p id="modal_event_client"></p></div>

                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我的问题是，每次我单击事件时，数据都会从前一个事件转发到当前事件。日历数据在刷新后正确分布。

如何实现refresh events或rerender events事件点击后？

更新:感谢ADyson的建议我向 eventClick 添加了显示功能:

if (event.event.extendedProps.super_user_status == 'True') {
    $('#subtask_name').hide();
    $('#subtask_description').hide();
    $('#subtask_names').show();
    $('#modal_subtask_names').html(event.event.extendedProps.subtask_names);
}
if (event.event.extendedProps.super_user_status == 'False') {
    $('#subtask_names').hide();
    $('#subtask_name').show();
    $('#subtask_description').show();
    $('#modal_subtask_name').html(event.event.extendedProps.subtask_name);
    $('#modal_subtask_description').html(event.event.extendedProps.subtask_description);
    $('#modal_subtask_comment').html(event.event.extendedProps.subtask_comment);
}

现在一切正常。

Answer 1

您没有具体说明哪个字段给您带来了问题，但我猜它是“subtask_names”字段，因为这是我在您的代码中找到问题的唯一字段。

这是一个演示:https://codepen.io/ADyson82/pen/GRRvPYv 。点击“销售 session ”。然后点击“营销 session ”。然后单击返回“销售 session ”。请注意营销 session 中仍然显示在“销售 session ”的第二次显示中的唯一字段是“subtask_names”吗？

这是因为 if (event.event.extendedProps.super_user_status == 'True') {。当“super_user_status”为 true 时，您可以设置“subtask_names”的值。但你从来没有重置过它。因此，下次您显示 super_user_status 为 false 的模式时，代码会将所有其他字段更改为新事件的数据，但会忽略该字段。

为了修复它，您需要一个 else 子句来在相反的情况下重置已更改的字段:

eventClick: function(event) {
    $('#modal_window').modal();
    $('#modal_event_client').html(event.event.extendedProps.client);
    $('#modal_event_user').html(event.event.extendedProps.user);
    if (event.event.extendedProps.super_user_status == 'True') {
      $('#modal_subtask_names').html(event.event.extendedProps.subtask_names);
      $('#subtask_name').hide();
      $('#subtask_description').hide();
   }
   else
   {
      $('#modal_subtask_names').html("");
      $('#subtask_name').show();
      $('#subtask_description').show();
   }
}

修复的工作演示:https://codepen.io/ADyson82/pen/yLLoZyd