Question

我们有一个页面，其中可以包含多个完整日历实例。

我允许用户动态选择他们的主题和视图以及其他各种选项。

在 V3 中，我们曾经：

销毁基于元素ID的日历
重新初始化。

我们很容易就能传递元素ID 并通过以下方式销毁它：

$("#someId").fullCalendar(‘destroy’)

在 V4 中，我们不能再传递元素ID。看来我们需要创建一个全局变量来保存每个日历。

是否有一种方法可以基于元素ID 获取初始化日历？

Answer 1

根据 V4 Destroy documentation，

您可以在日历对象上使用destroy（）方法。

下面是一个例子，

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <link href='../packages/core/main.css' rel='stylesheet' />
        <link href='../packages/daygrid/main.css' rel='stylesheet' />
        <script src='../packages/core/main.js'></script>
        <script src='../packages/interaction/main.js'></script>
        <script src='../packages/daygrid/main.js'></script>
        <script>

            document.addEventListener('DOMContentLoaded', function () {
                var calendars = {};

                create_calendar('calendar'); // creates calendar for element with id 'calendar'
                create_calendar('calendar2'); // creates calendar for element with id 'calendar2'
                destroy_calendar('calendar'); // destroys calendar for element with id 'calendar'

                // function to destroy calendar that take element id as an argument

                function destroy_calendar(id) {
                    calendars[id].destroy();
                    delete calendars[id];
                }

                // function to create calendar that take element id as an argument

                function create_calendar(id) {
                    var calendarEl = document.getElementById(id);

                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        plugins: ['interaction', 'dayGrid'],
                        defaultDate: '2019-03-12',
                        editable: true,
                        eventLimit: true, // allow "more" link when too many events
                    });
                    calendars[id] = calendar;
                    calendar.render();
                }
            });
        </script>
        <style>

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

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

        </style>
    </head>
    <body>

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

    </body>
</html>

Answer 2

最后弄清楚了这一点。我知道JQuery不再是块子上的好孩子，但它仍然有其用途：

<script>
    // Globally setup your calendar by initializing it
    var calendarEl = document.getElementById('calendar');
    var myCalendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth'
    });

    document.addEventListener('DOMContentLoaded', function() {
        // Any changes to the calendar before it renders the first time
    });

    // Any JQuery event can then access the initialized object
    $(".calendarSource").click(function () {
        console.log(myCalendar.getDate());
    });
<script>

Fullcalendar V4通过documentId获取初始化的日历

2 个答案: