Как динамически фильтровать переменные jinja2 на основе Javascript переменных / событий?

Question

Я загружаю список встреч в шаблон jinja2 через flask (у каждой встречи есть столбец даты, сохраненный в формате %Y-%m-%d %H:%M:%S.%f UT C). Когда пользователь нажимает на дату календаря, я хочу, чтобы модальное окно всплыло и отфильтровало встречи, чтобы отображались только встречи на эту дату. Я могу получить внутренние htmls <div id="modal-month"></div>, <div id="modal-date"></div>, <div id="modal-year"></div>; однако я не уверен, как динамически фильтровать встречи, чтобы отображалась только встреча в выбранный день.

models.py

class User(db.Model, UserMixin):
    id = db.Column(db.Integer, primary_key=True)
    ...
    appointments_confirmed = db.relationship('AppointmentConfirmed', backref='author', lazy=True)
    ...

class AppointmentConfirmed(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    ...
    appointment_confirmed = db.Column(db.DateTime, nullable=False)
    ...

rout.py

def calendar_dasboard():
     appointments = current_user.appointments_confirmed
     return render_template('calendar_dashboard.html', title='Calendar Dashboard', appointments=appointments)

Загрузка встреч в режиме HTML модальный:

...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Appointments</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">  
                    <div id="modal-month"></div>
                    <div id="modal-date"></div>
                    <div id="modal-year"></div>
                    {% for appointment in appointments %}
                    {% if appointment.appointment_confirmed.date() == datetime.datetime(js_year,js_month,js_date).date() %}
                        <p>You have an appointment on: {{ appointment.appointment_confirmed }}</p>
                        <hr>
                    {% endif %}
                    {% endfor %}
                </div>

                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
         </div>
...

Загрузка в JS для создания календаря:

<script>
            var dt = new Date();
            function renderDate() {
                dt.setDate(1);
                var day = dt.getDay();
                var today = new Date();
                var endDate = new Date(
                    dt.getFullYear(),
                    dt.getMonth() + 1,
                    0
                ).getDate();

                var prevDate = new Date(
                    dt.getFullYear(),
                    dt.getMonth(),
                    0
                ).getDate();
                var months = [
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "August",
                    "September",
                    "October",
                    "November",
                    "December"
                ]
                document.getElementById("month").innerHTML = months[dt.getMonth()];
                document.getElementById("year").innerHTML =  dt.getFullYear();
                var cells = "";
                for (x = day; x > 0; x--) {
                    cells += "<div class='prev_date'>" + (prevDate - x + 1) + "</div>";
                }
                for (i = 1; i <= endDate; i++) {
                    if (dt.getMonth() < today.getMonth() && dt.getFullYear() <= today.getFullYear()) cells += "<div class='prev_date'>" + i + "</div>";
                    else if (dt.getFullYear() < today.getFullYear()) cells += "<div class='prev_date'>" + i + "</div>";
                    else if (i == today.getDate() && dt.getMonth() == today.getMonth() && today.getFullYear() == dt.getFullYear()) cells += "<div class='today' onmouseover='printDateInModal(dt.getMonth(), innerHTML, dt.getFullYear())' data-toggle='modal' data-target='#exampleModal' type='button'>" + i + "</div>";
                    else if (i < today.getDate() && dt.getMonth() == today.getMonth() && dt.getFullYear() == today.getFullYear()) cells += "<div class='prev_date'>" + i + "</div>";
                    else
                        cells += "<div id ='future_date' onmouseover='printDateInModal(dt.getMonth(), innerHTML, dt.getFullYear())' data-toggle='modal' data-target='#exampleModal' type='button'>" + i + "</div>";
                }   
                document.getElementsByClassName("days")[0].innerHTML = cells;

            }

            function moveDate(para) {
                if(para == "prev") {
                    dt.setMonth(dt.getMonth() - 1);
                } else if(para == 'next') {
                    dt.setMonth(dt.getMonth() + 1);
                }
                renderDate();
            }

            function printDateInModal(Month, Date, Year) {
                var months = [
                    "January",
                    "February",
                    "March",
                    "April",
                    "May",
                    "June",
                    "July",
                    "August",
                    "September",
                    "October",
                    "November",
                    "December"
                ]
                document.getElementById('modal-month').innerHTML = months[Month]; //maybe assign it to modal here?
                document.getElementById('modal-date').innerHTML = Date;  //maybe assign it to modal here?
                document.getElementById('modal-year').innerHTML = Year;  //maybe assign it to modal here?
            }     
        </script>