Отображение запланированных событий fullCalendar в модальном режиме

Question

Я использую fullCalendar, чтобы запланировать задачу / событие.Каждое новое событие создается из модального и сохраняется в массиве, и этот массив событий передается свойству 'events' в fullCalendar.Я успешен в создании событий и отображении запланированных событий на одном и том же модале, так что у пользователя будет ссылка на уже запланированные события.Это выглядит примерно так -

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

html:

    <div class="modal-body" id="modalBody">                                                
                        <div class="modalBodyElements" id="main">
                            <div class="row">
                                <div class="col-sm-6 column1">
                                    <div class="form-group">
                                        <label class="control-label col-sm-4" for="eventTitle">Task Title: </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="eventTitle" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-4" for="eventStartTime">Start Time: </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="eventStartTime" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-4" for="eventEndTime">End Time: </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="eventEndTime" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-4" for="allDayEvent">All Day: </label>
                                        <div class="col-sm-8">
                                            <input type="checkbox" class="form-control" id="allDayEventCheckbox" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-5" for="selectParticipants">Select Participants: </label>
                                        <div class="col-sm-7">
                                            <select id="selectParticipantOptions" style="width: 100%;" multiple>
                                                <option value="participant-1">Participant-1</option>
                                                <option value="participant-2">Participant-2</option>
                                                <option value="participant-3">Participant-3</option>
                                                <option value="all-participants">All Participants</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 column2" id="eventsList">
                                    <div class="form-group container">
                                        <label class="control-label" for="taskDetails"><h4>Scheduled Tasks: </h4></label><span id="dateclicked"></span><br/><br/>
                                        <div style="margin-left: 50px;">
                                            <span id="scheduledTasks"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>    
                        </div>                                  
                    </div>

js:

$('.calendar').fullCalendar({
    events: [
        eventArr
    ],
    dayClick: function(date) {


        $('#calendarModal').modal();
        $('#createEvent').on('click', function() {
            eventTitle = document.getElementById('eventTitle').value;
            startTimeOfEvent = document.getElementById('eventStartTime').value;
            endTimeOfEvent = document.getElementById('eventEndTime').value;

            Swal.fire({
                title: 'Are you sure?',
                type: 'warning',
                html: 'You are about to add an event,
                showCancelButton: true,
                confirmButtonText: 'Add Event!',
                cancelButtonText: 'Cancel',
            }).then((result) => {
                var eventWithTimings = {
                            title: eventTitle,
                            start: startDateAndTime,
                            end: endDateAndTime,
                            allDay: false,
                            editable: true,
                            color: selectEventColours()
                        }

                        eventArr.push(eventWithTimings);
                        $('.calendar').fullCalendar('renderEvent', eventWithTimings, true);

                        /** display the already scheduled tasks in the column-2 of modal, starts */

                    var title, start, end, allDay;
                    eventArr.forEach(function(element) {
                        title = element.title;
                        start = element.start;
                        end = element.end;
                        allDay = element.allDay;       
                    });
                    if(startTimeOfEvent != "") {
                        $('#scheduledTasks').append(
                            '<b>Title:  </b>' + " " +  title + '<br/>' +
                            '<b>Start time:  </b>' + " " +  startTimeOfEvent + '<br/>' +
                            '<b>End time:  </b>' + " " +  endTimeOfEvent + '<br/>' +
                            '<b>Participants:  </b>' + " " + participantsSelected + '<hr/>'
                        );
                    } 
                    else{
                        $('#scheduledTasks').append( 
                            '<b>Title:  </b>' + " " +  title + '<br/>' +
                            '<b>All Day:  </b>' + " " +  allDay + '<br/>' +
                            '<b>Participants:  </b>' + " " + participantsSelected + '<hr/>'
                        );
                    }

                    /** display the already scheduled tasks in the column-2 of modal, ends */
            }
        }
    }
})

Я думаю, часть js внутри комментария "отображать уже запланированные задачи в столбце 2 модального режима необходимо переместить, но я не уверен, куда двигатьсяМожет кто-нибудь, пожалуйста, помогите мне?