0

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

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

例如，我想我需要将 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>
4

1 回答 1

0

我将通过评论部分的答案。

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

flex 风格帮助我把相邻的，水平放置

于 2019-12-20T15:32:50.290 回答