Django Fullcalendar - 在多个 html 上呈现

Question

我有一个 HTML 页面，可以毫无问题地呈现我的日历。

但是，我还想将我的所有日​​历预览到另一个页面，例如 {% include %}（这不起作用）。

有没有什么方法可以做到这一点，而无需制作另一个函数，并单独渲染它？

这是我的 calendars.html：

{% extends 'base.html' %}
{% load static %}
{% block title %} Kalendar {% endblock title %}



{% block content_row %}
    <!--------------------------------------------- FULLCALENDAR LINKS ---------------------------------------------->
    {% include 'main/partials/_link_fullcalendar.html' %}
    <!--------------------------------------------- FULLCALENDAR LINKS END ------------------------------------------>

    {% if messages %}
        {% for message in messages %}
            <div class="container-fluid">
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>Uspešno!</strong> {{ message }}
                </div>
            </div>
        {% endfor %}
    {% endif %}

    {% if calendars %}
        {% for cal in calendars %}
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    let calendarEl = document.getElementById('{{ cal.id }}');
                    //////////////////////////////////////////////////////////////////////////////////////////////
                    let calendar1 = new FullCalendar.Calendar(calendarEl, {
                        minTime: "07:00:00",
                        maxTime: "22:00:00",
                        businessHours: {
                            startTime: '08:00', // a start time (10am in this example)
                            endTime: '21:00', // an end time (6pm in this example)
                        },
                        height: 'auto',
                        locale: 'sr',
                        plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                        defaultView: 'timeGridThreeDay',
                        header: {
                            left: 'today',
                            center: '{{ cal.name|title }}',
                            right: 'dayGridWeek,timeGridThreeDay'
                        },
                        views: {
                            timeGridThreeDay: {
                                type: 'timeGrid',
                                duration: {days: 3},
                                buttonText: '3 Dana'
                            }
                        },
                        navLinks: false, // can click day/week names to navigate views
                        editable: false,
                        eventLimit: true, // allow "more" link when too many events
                        eventTextColor: 'black',
                        events: [
                            {% for i in events %}
                                {% if i.calendar_id == cal.id %}
                                    {
                                        id: "{{ i.event_id }}",
                                        calendar: "{{ i.calendar }}",
                                        calendar_id: "{{ i.calendar_id }}",
                                        title: "{{ i.event_name}}",
                                        start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i" }}',
                                        end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',

                                    },
                                {% endif %}
                            {% endfor %}
                        ]
                    });
                    //////////////////////////////////////////////////////////////////////////////////////////////
                    calendar1.render();
                    //////////////////////////////////////////////////////////////////////////////////////////////
                })
                ;
            </script>
        {% endfor %}
    {% endif %}

    <div style="display: flex; overflow-x: scroll; height: 800px" class="container">
        {% for cal in calendars %}
            <p>{{ cal.name|title }}</p>
            <div class="container" id='{{ cal.id }}'></div>
        {% endfor %}
    </div>

    <!---------------------------------------------- FULLCALENDAR SCRIPT----------------------------------------------->
    {% include 'main/partials/_fullcalendar_script.html' %}
    <!---------------------------------------------- FULLCALENDAR SCRIPT END ------------------------------------------>
{% endblock %}

这是我要预览的页面，因此用户可以在安排之前查看可用日期。

我只想在表单所在的那个旁边创建另一个 div，并将我的日历放在里面，这样用户就可以有两个相邻的 div，一个带有表单，另一个带有日历和可用插槽.

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block title %} Zakaži {% endblock title %}



{% block content_row %}
    <div style="display: flex;" class="flex-container">

        <div class="container">
            <div class="row">
                <div class="col">
                    <form method="post" action="{% url 'main:add_event' opp.pk %}">
                        {{ form|crispy }}
                        {% csrf_token %}
                        <button type="submit" class="btn btn-primary">Potvrdi</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock content_row %}

Answer 1

我完全忘记了我可以将 calendar.objects.all() 放入需要渲染所有日历的视图中。