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

Question

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

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

在V3 中，我们曾经：

根据元素id销毁日历
使用新选项重新初始化。

我们可以很容易地传递一个元素 Id并通过以下方式销毁它：

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

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

有没有办法根据元素 Id获取初始化的日历？

Answer 1

根据V4 Destroy 文档，

您可以在日历对象上使用 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 个解决方案

解决方案1
3 已采纳 2019-03-20 08:06:57

解决方案2
0 2020-11-27 21:28:14

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2019-03-20 08:06:57

解决方案2 0 2020-11-27 21:28:14

解决方案1
3 已采纳 2019-03-20 08:06:57

解决方案2
0 2020-11-27 21:28:14