Question

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

是否有可能将多个Fullcalendar呈现到我的html页面中，具体取决于数据库中制作了多少个Calendar。而且，我需要水平渲染它们。

例如，我想需要将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中有多个日历

1 个答案: