Javascript 完整日历刷新/重新刷新所有事件

我有基于脚本标签的完整日历，根据。将数据加载到引导模式的My calendar poses 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>

---

现在一切都正常了。

您没有明确指出哪些字段导致了问题，但我想这是子任务名称字段，因为这是我在代码中唯一能找到问题的字段

这里有一个演示：。点击销售会议。然后点击营销会议。然后单击“返回销售会议”。注意，Marketing Meeting中的唯一字段仍然显示在Sales Meeting的第二次显示中，即子任务名称

这是因为if event.event.extendedProps.super_user_status=='True'{。当super_user_status为True时，您设置子任务名称的值。但您从未重置它。因此，下次显示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();
   }
}

---

修复程序的工作演示：

最简单的方法是使函数refreshCalendarevents。在此函数中，您调用$'calendar'.fullCalendar'destroy'，然后重新初始化日历，包括给定的事件$'calendar'.fullCalendar{…}@toffler永远不需要完全销毁日历来重新加载/刷新事件。您的代码示例也适用于fullCalendar 3，但上面的代码是版本4。它们不兼容。@zaraki为什么要在单击事件后刷新事件？这无助于加载模式。而且上面的代码也没有提供足够的信息以帮助理解问题的原因。您能提供足够的代码和数据，以便我们能够真实再现问题吗？谢谢。@ADyson Hi，我添加了主要部分代码结构。我需要刷新事件，因为在单击一个模式后，我看到了正确的数据，但当我关闭此模式，然后单击“下一个”时，第一个模式中的数据将被刷新al也在第二个模式中。总的来说，数据是从一个模式复制到另一个模式的。感谢您解决了这个问题。我在click函数上添加了else版本，作为另一个if语句代码更新。您建议代码将所有其他字段更改为新事件的数据，让我知道我对这个问题的看法。结果是，我没有添加show func注意，这就是为什么我什么都没看到。@ZarakiKenpachi没问题。如果答案对您有帮助，请记住标记为已接受/添加追加投票作为确认。无需为您的问题添加解决方案-答案与问题分开。谢谢：-

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

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