Fullcalendar V4 получить инициализированный календарь по documentId - PullRequest
Новая
       20

Fullcalendar V4 получить инициализированный календарь по documentId

1 голос
/ 20 марта 2019

У нас есть страница, которая может содержать несколько полных календарей экземпляров.

Я разрешаю пользователю динамически выбирать свою тему, вид и различные другие параметры.

В V3 мы привыкли:

  1. Уничтожить календарь на основе идентификатора элемента
  2. повторно инициализировать с новыми параметрами.

Мы легко смогли передать идентификатор элемента и уничтожить его: 

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

В V4 мы не можем просто пропустить Id элемента. Похоже, нам нужно создать глобальную переменную для хранения каждого календаря.

Есть ли способ получить инициализированный календарь на основе элемента Id ?

1 Ответ

2 голосов
/ 20 марта 2019

Согласно V4 Документация по уничтожению ,

Вы можете использовать метод 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...