显示从 django 数据库到 fullcalendar 的事件

Question

我在一个 django 项目中，我想在其中将 django 数据库中的事件显示到 fullcalendar。

我遇到的问题与这个问题类似但我没有使用 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 全日历：

{% 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 %}

循环外有一个事件用于测试显示。显示硬编码事件、循环外事件效果很好。 screen of my calendar

这是我评论的 return 的内容，它对应于我在上下文中发送的 datatest 变量。 screen of the return

我希望我已经提供了足够的细节而不会让你淹没在阅读中。问候

Answer 1

当您将 datatest 放入 appointment 属性中时，它看起来已经是一个 JSON 字符串。因此，您无法按照您尝试的方式遍历 appointment，因为它是一段文本，而不是数组。

同样在 datatest 中，您可以清楚地看到数据没有“原因”、“start_date”或“end_date”属性...您已经已经将它们转换为 fullCalendar 期望的名称。

因此我认为在 fullCalendar JS 代码中你应该可以这样写：

events: {{ appointment }}

将 JSON 直接注入 JS 代码（并将其视为数组文字）。

显示从 django 数据库到 fullcalendar 的事件

display events from django database to fullcalendar

javascript

python

django

ajax

fullcalendar