Unable to display appointments in calender.

Using Django Templates & Frontend
1

Could someone assist me with displaying appointments? I attempted to use events: {{ appointments | safe }}, but it didn’t work. Can anyone advise on how to resolve this?

@login_required(login_url='patient-login')
@allowed_users(allowed_roles=['patient'])
def patient_calendar_view(request):
    user = request.user
    
    patient = get_object_or_404(Patient, user=user)
    
    patient_appointments = Appointment.objects.filter(patient=patient)
    
    serialized_appointments = [{
        'title': appointment.title,  
        'start': appointment.date_and_time,
        'color': appointment.get_color_code_display(), 
    } for appointment in patient_appointments]
    
    return render(request, 'appointments/patient_calendar.html', {'appointments': serialized_appointments})

views.py

<!DOCTYPE html>
<html>
<head>
  <title>VitiGo</title>
  <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.0/main.min.css" rel="stylesheet">
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
</head>
<body>
    {% include 'users/patient/patient_navbar.html' %}
      {% block content %}
      {% endblock %}
</body>
</html>

patient_base.html

{% extends 'users/patient/patient_base.html' %}

{% block content %}
<section class="text-gray-600 body-font pt-24">
  <div class="container mx-auto px-4 py-8 flex justify-center items-center min-h-screen">
    <div id="calendar" class="max-w-md bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    </div>
  </div>
{% endblock %}

patient_calender.html