全日历 refresh/reredenred 所有事件

Question

根据 this，我有基于脚本标签的完整日历。我的日历设置了将数据加载到 bootstrap 模式的 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>

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

eventClick后如何实现refresh events or 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。点击 "Sales Meeting"。然后点击 "Marketing Meeting"。然后单击 "Sales Meeting"。请注意，在 "Sales Meeting" 的第二次显示中，Marketing Meeting 中唯一仍然显示的字段是 "subtask_names"?

这是因为if (event.event.extendedProps.super_user_status == 'True') {。当 "super_user_status" 为真时，您设置 "subtask_names" 的值。但你永远不会重置它。因此，下次您显示 super_user_status 为假的模态时，代码会将所有其他字段更改为新事件的数据，但它会忽略那个。

为了修复它，您需要一个 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

全日历 refresh/reredenred 所有事件

Fullcalendar refresh/reredenred all events

javascript

jquery

fullcalendar