Django Полный календарь - визуализация более чем на одном html - PullRequest
Новая
       4

Django Полный календарь - визуализация более чем на одном html

0 голосов
/ 21 января 2020

У меня есть страница HTML, где мои календари отображаются без проблем.

Но я хочу также просмотреть все свои календари на другой странице, что-то вроде {% include%} (что не будет работать).

Есть ли способ сделать это, не выполняя другую функцию, и отобразить ее отдельно?

Это мои календари. 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 %}

1 Ответ

0 голосов
/ 23 января 2020

Я полностью забыл, что могу поместить calendar.objects.all () в представление, где мне нужно отобразить все календари.

...