fullCalendar 不在引导选项卡内呈现答案

【问题标题】：fullCalendar doesn't render inside a bootstrap tabfullCalendar 不在引导选项卡内呈现
【发布时间】：2022-07-07 05:47:35
【问题描述】：

实际上，我正在尝试在引导选项卡中呈现 fullCalendar，如果 fullCalendar 在活动选项卡中（通常是第一个），它可以工作，但是当我将它放在另一个选项卡中时，这不是活动的，当页面加载时日历渲染得很糟糕（我附上了一些图片来展示它）。

Active tab is "Información básica", when i tab the "Calendario" appears that

我尝试过这样做：

$('#mytabcalendar').click(function () {
     calendar.updateSize();
});

其中“mytabcalendar”是我的标签“日历”。感谢您的任何想法

【问题讨论】：

挂钩到 require 选项卡的 shown.bs.tab 事件并在该事件处理程序中初始化日历
我试过了，但问题是 fullcalendar 在部分页面中，因为在不同的页面中使用，所以这是在单独的 js 文件中呈现的。另外，我尝试了put calendar.render（）; 当Tab Pane处于活动状态而没有：（）

标签： javascript html jquery fullcalendar bootstrap-5

【解决方案1】：

当显示一个新标签时，你需要Events 触发。如下所示。：

var triggerTabList = [].slice.call(document.querySelectorAll('a[data-bs-toggle="tab"]'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)
  triggerEl.addEventListener('hidden.bs.tab', function (event) {

    calendar.updateSize();

  })
})

【讨论】：