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

Я работаю над проектом django, в котором я хочу отображать события из базы данных django в fullcalendar.

Проблема, с которой я столкнулся, похожа на эту FullCalendar not displaying events, но я не использую php, и мне трудно представить, что я теряю (я предполагаю, что это Ajax запрос, учитывая предоставленный ответ). В настоящее время это выглядит так, как будто мой контекст не был обработан

Я не хочу добавлять события из JS в базу данных, просто отображать их, получая из базы данных. Добавление в базу данных будет происходить позже с помощью django и python через форму. Заранее благодарю за разъяснения.

Мой код представления календаря:

class ScheduleCalendarView(LoginRequiredMixin, View):
def get(self, request):
    all_events = Planning.objects.all()
    event_arr = []
    for i in all_events:
        event_sub_arr = {}
        event_sub_arr['title'] = i.reason
        start_date = datetime.strptime(str(i.appointment_date_start.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        end_date = datetime.strptime(str(i.appointment_hour_stop.date()), "%Y-%m-%d").strftime("%Y-%m-%d")
        event_sub_arr['start'] = start_date
        event_sub_arr['end'] = end_date
        event_arr.append(event_sub_arr)
    data = JsonResponse((event_arr), safe=False)
    datatest = json.dumps(event_arr)
        #return HttpResponse(json.dumps(event_arr))
    print(data, type(data))
    print(datatest, type(datatest))
    #return HttpResponse(json.dumps(event_arr))
    context = {
        "appointment": datatest
    }

    return render(request, "schedule/fullcalendar.html", context)

Мой шаблон html с Fullcalendar:

{% extends 'base_admin.html' %}
{% load static %}
{% block head_shedule_content %}
{% load static %}
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
<link href="{% static 'css/fullcalendar/main.css' %}" rel='stylesheet' />
<script src="{% static 'js/fullcalendar/main.js' %}"></script>
<script src="{% static 'js/fullcalendar/locales-all.js' %}"></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var initialLocaleCode = 'fr';
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      themeSystem: 'bootstrap5',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
      },
      locale: initialLocaleCode,
      navLinks: true, // can click day/week names to navigate views
      businessHours: true, // display business hours
      editable: true,
      selectable: true,
      weekNumbers: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {% for i in appointment %}
            {
                title: "{{ i.reason }}",
                start: '{{ i.start_date|date:"Y-m-d" }}',
                end: '{{ i.end_date|date:"Y-m-d" }}',
            },
        {% endfor %}
        {
      title: 'Click for Google',
      url: 'http://google.com/',
      start: '2022-04-28'
    }
      ]
    });
    calendar.render();
  });
</script>
<style>



#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}

#calendar {
max-width: 1100px;
margin: 40px auto;
padding: 0 10px;
}

</style>
{% endblock %}
{% block content %}
{% load static %}
    <!-- Portfolio Section-->
    <section class="page-section portfolio" id="planning">
        <div class="container">
            <!-- Portfolio Section Heading-->
            <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Planning</h2>
            <!-- Icon Divider-->
            <div class="divider-custom">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fa-solid fa-bone"></i></div>
                <div class="divider-custom-line"></div>
            </div>
        <div id='calendar'></div>
        </div>
    </section>
{% endblock %}

Для тестового отображения существует событие вне цикла. Отображение жестко закодированного события, вне цикла работает хорошо. Экран моего календаря

Вот содержимое моего закомментированного return, которое соответствует моей переменной datatest, которую я отправляю в контексте. Экран возврата

Надеюсь, я дал достаточно подробную информацию, не утопив вас в чтении. С уважением

events: {{ appointment }}

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {


        editable:true,
        selectable:true,
        contentWidth:300,
        navLinks: true,

       events: {{ appointment|safe }},
});

         calendar.render();
});