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

Question

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

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

在 V3 中，我们曾经:

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

我们很容易传递一个元素 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>