Django Fullcalendar - App 中有多个日历

Question

既然我设法在我的 Django 应用程序中实现了 Fullcalendar 的功能，我还有一个问题。

是否可以在我的 html 页面中呈现多个完整日历，具体取决于数据库中制作的日历数量。而且，我需要将它们水平渲染。

我想我需要将我的 div 的 ID 更改为 'calendar2'。但是我应该在初始化程序中更改什么？

This is full script and style from my calendar.

<script>
            document.addEventListener('DOMContentLoaded', function () {
                let calendarEl = document.getElementById('calendar');
                let calendar = 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: 'timeGridDay',
                    header: {
                        left: 'today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    navLinks: false, // can click day/week names to navigate views
                    editable: false,
                    eventLimit: true, // allow "more" link when too many events
                    events: [
                        {% for i in events %}
                            {
                                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" }}',

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

<style>

            body {
                margin: 40px 10px;
                padding: 0;
                font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
                font-size: 14px;
            }

            #calendar {
                max-width: 900px;
                margin: 0 auto;
            }

</style>

<body>

    <div id='calendar'></div>

</body>

Answer 1

我会在评论区传递答案。

只需要创建尽可能多的 div 元素，并为每个元素附加一个日历（让 calendarEl = document.getElementById('calendar'); 控制日历附加到哪个元素到，所以你只需要它是动态的，或重复的）。

flex 样式帮助我将下一个水平放置在一起

Django Fullcalendar - App 中有多个日历

Django Fullcalendar - More than one calendar in App

django

fullcalendar

django-3.0