我有一个显示 2 个日历的 FullCalendar 库的小代码。一个在第一个选项卡上，一个在第二个选项卡上。两个日历都会显示，但是，在页面加载时不可见的日历没有正确显示。
完整代码：https ://codepen.io/MadBoyEvo/pen/rNxQQYP
所以我想我会进行刷新或快速将视图从当前更改为新视图，然后在选项卡开关上返回当前，但无论我做什么它都不起作用。
<script type="text/javascript">var tabs = tabbis.init({
tabGroup: "[data-tabs]",
paneGroup: "[data-panes]",
tabActive: "active",
paneActive: "active",
callback: function (tab, pane) {
// console.log("TAB id:" + tab.id);
// console.log(pane.id);
// console.log(tableid);
// this makes sure to refresh tables on tab change to make sure they have buttons and everything
// it's a bit heavy as it touches all tables, may require some improvements in future to consider
// which tab has which table
try {
var tableid = document.getElementById(tab.id + "-Content").querySelector('table[id^="DT-"]').id;
$("#" + tableid).DataTable().columns.adjust().responsive.recalc();
} catch (e) {
console.log('No datatables available.');
}
// this code here doesn't work
var view = $('#Calendar-on26xq0w').fullCalendar('getView');
alert("The view's title is " + view.title);
}
});
// in theory should take care of removing local storage for tabbis
// some errors occurs if the local storage is not cleaned after a while
window.addEventListener("unload", tabbis.remove, false);
</script><!-- JS Elastic Tabbis END -->
错误显示：Uncaught TypeError: $(...).fullCalendar is not a function
我尝试将 calendar.js 脚本从上到下移动到失败但没有任何帮助的脚本代码之前或之后。
我有点 JS 菜鸟，所以我有点不清楚为什么它不起作用。我对 DataTables（Try/catch）使用了类似的方法，它工作正常（如果加载了 DataTable）
编辑：
我尝试搜索日历 ID - 我可以找到它，但在第 3 行可以看到相同的错误。
var calendarid = document.getElementById(tab.id + "-Content").querySelector('div[id^="Calendar-"]').id;
alert("The calendarid " + calendarid);
var view = $('#' + calendarid).fullCalendar('getView');
alert("The view's title is " + view.title);