Fullcalendar обновить / пересмотреть все события

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>

Моя проблема заключается в том, что каждый раз, когда я щелкаю событие, данные перенаправляются из предыдущего события в текущее,Данные календаря правильно распределяются после обновления.

Как реализовать события обновления или события перерисовки после события щелчка?

Обновление: благодаря использованию ADyson я добавил в событие функцию showClick:

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. Нажмите на «Собрание продаж». Затем нажмите «Маркетинговая встреча». Затем нажмите «Встреча по продажам». Обратите внимание, что единственное поле из Marketing Meeting, которое все еще отображается во втором показе «Sales Meeting», это «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