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

Question

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

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

在 V3 中我们曾经：

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

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

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

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

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

Answer 1

根据 V4 Destroy documentation,

您可以在日历对象上使用 destroy() 方法。

下面是一个例子，

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];
    console.log('calendar with id = "'+id+'" has been destroyed');
  }

  // 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();
    console.log('calendar with id = "'+id+'" has been created');
  }
});

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;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.0.0-beta.4/core/main.css" integrity="sha512-SFYZeFgRSEZ2OUutPFk0nVSJ93GEoVIWWEA1cTpZ67b5lhYaYwwDZ9SeG5lNysgPJNwagcHBoegIqq+kwuo2LQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.0.0-beta.4/daygrid/main.css" integrity="sha512-PnqqvEx9xoUCNT0s0SJVwMfHA52MlX547UtDDL6h+3N4kz42EJsUOfM2+91lQ3w3Dr9THlb2nh3fmSO9/5VnzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.0.0-beta.4/core/main.js" integrity="sha512-5LobOLPA5eTCr4M87YZjBSrSZUry3Ckvbbj7KA9/E8kFZq3Xq5OW+KfDBNCXjwG2T8QD6A745H3MWr2NqP2Log==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.0.0-beta.4/interaction/main.js" integrity="sha512-d7x1RUJWKezu09fJRRHhsX58Y7h+oM2vgIOswR25MA7tqthlh/cCv6ZeBY29NlLN+pJ5X85ujAr1VHVB8LaK+A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.0.0-beta.4/daygrid/main.js" integrity="sha512-XbJEgFuW5EDNC7q8XSEL554VgleQOQlUEt2gJXNp22PKk7+r9f7ki+o9pd7ygwV6LH/SMemodLNZ+4D1ABlgrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

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 获取初始化日历

Fullcalendar V4 get initialised calendar by documentId

javascript

fullcalendar