Fullcalendar refresh/reredenred all events

Question

I have fullcalendar based on script tags according to this. My calendar poses eventClick function that load data into bootstrap modal:

<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>

My problem is that every time i click event the data is forwarded from previous event into current. Calendar data is properly distributed after refresh.

How to implement refresh events or rerender events after eventClick?

Update: Thanks to sugestion of ADyson i added show function to the 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);
}

Now all is working fine.

The easiest way is to make a function refreshCalendar(events). In this function u call $('#calendar').fullCalendar('destroy'); and then reinitialize the calendar including your given events $('#calendar').fullCalendar({...}) — toffler
@toffler there should never be any need to completely destroy the calendar just to reload / refresh the events. Also your code example is for fullCalendar 3 but the code above is version 4. They are not compatible. — ADyson
@zaraki why would you want to refresh the events after clicking on one? That won't help to load your modal. And the code above doesn't give enough information to help understand why you have a problem. Can you provide enough code and data so we could actually reproduce the issue? Thanks. — ADyson
@ADyson Hi, i added main part code structure. I need to refresh events because after clicking on one modal i see correct data, but when i close this and then click next one the data from first modal is also in second one. Overall the data is copied from one modal to another. — Zaraki Kenpachi

ADyson ADyson · Accepted Answer · 2019-10-29T09:47:12

You didn't say specifically which field(s) are causing you a problem, but I'm going to guess it's the "subtask_names" field, because that's the only one I can find an issue with in your code.

Here's a demo: https://codepen.io/ADyson82/pen/GRRvPYv . Click on "Sales Meeting". Then click on "Marketing Meeting". Then click back on "Sales Meeting". Notice how the only field from Marketing Meeting which still gets displayed in the second showing of "Sales Meeting" is the "subtask_names"?

This is because of if (event.event.extendedProps.super_user_status == 'True') {. When the "super_user_status" is true, you set the value of the "subtask_names". But you never reset it. So next time you show the modal where super_user_status is false, the code changes all the other fields to the new event's data, but it ignores that one.

In order to fix it, you need an else clause to reset the changed fields in the opposite case:

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

Working demo of the fix: https://codepen.io/ADyson82/pen/yLLoZyd

Fullcalendar refresh/reredenred all events

1 Answers