未捕获的类型错误：$(...).fullCalendar 不是 function 错误

Question

我有一个带有 FullCalendar 库的小代码，显示 2 个日历。 一个在第一个选项卡上，一个在第二个选项卡上。 两个日历都会显示，但是，在页面加载时不可见的日历没有正确显示。

完整代码： 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);

Answer 1

感谢@ADyson 的评论，我能够理解我的问题：

• FullCalendar V5没有我尝试使用的方法

If you're using fullcalendar v5 as per your tag, then $('#Calendar-on26xq0w').fullCalendar will never work - that's the syntax from fullCalendar v3 (back when it was a jQuery plugin, hence the jQuery-style selector to初始化对象）。 如果您想调用 v4 或 v5 中的方法，那么您需要引用您在初始化日历时创建的 object，然后要获取当前视图，您可以简单地编写 calendar.view（它是属性而不是函数） - 请参阅fullcalendar.io/docs/Calendar-view。 （在 v5 中也没有像 getView 这样的 function 。）

• 我无法使用查询 DOM Object 并以某种方式将其传递给 FullCalendar，就像我尝试做的那样
• 我实际上要做的是创建 object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects并存储相关的 JS 对象。

在最顶部定义空 object

<!-- JS FullCalendar Basic START -->
<script type="text/javascript">var calendarTracker = {

    };
</script><!-- JS FullCalendar Basic END -->
<!-- CSS FullCalendar Basic START -->

接下来为我创建的每个日历

<script>document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('Calendar-c43nxqpi');
        var calendar = new FullCalendar.Calendar(calendarEl,
            {
                "headerToolbar": {
                    "left": "prev,next,today",
                    "right": "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
                    "center": "title"
                },
                "initialView": "listWeek",
                "initialDate": "2020-07-20",
                "nowIndicator": true,
                "navLinks": true,
                "businessHours": false,
                "editable": false,
                "events": [
                    {
                        "title": "Active Directory Meeting",
                        "description": "We will talk about stuff",
                        "start": "2020-07-20T11:43:35"
                    },
                    {
                        "title": "Lunch",
                        "description": "Very long lunch",
                        "start": "2020-07-22T08:43:35",
                        "end": "2020-07-23T11:43:35"
                    }
                ],
                "dayMaxEventRows": true,
                "weekNumbers": true,
                "weekNumberCalculation": "ISO",
                "selectable": true,
                "selectMirror": true,
                "buttonIcons": false,
                "views": {
                    "listWeek": {
                        "buttonText": "list week"
                    },
                    "listMonth": {
                        "buttonText": "list month"
                    },
                    "listDay": {
                        "buttonText": "list day"
                    }
                },
                eventRender: function (info) {
                    var tooltip = new Tooltip(info.el, {
                        title: info.event.extendedProps.description,
                        placement: 'top',
                        trigger: 'hover',
                        container: 'body'
                    });
                }
            }
        );
        calendar.render();
        calendarTracker['Calendar-c43nxqpi'] = calendar;
    }); 
</script>

我已经使用基于它的 html id 的密钥存储了这个日历 object。

calendarTracker['Calendar-c43nxqpi'] = calendar;

最后在选项卡开关上

<script type="text/javascript">var tabs = tabbis.init({
    tabGroup: "[data-tabs]",
    paneGroup: "[data-panes]",
    tabActive: "active",
    paneActive: "active",
    callback: function (tab, pane) {
        // We need to make same thing for calendar
        function redrawCalendar(calendar) {
            //console.log(calendarTracker[calendar.id].view);
            calendarTracker[calendar.id].changeView(calendarTracker[calendar.id].view.type);
            console.log('Redrawing view for' + calendar.id)
        }

        try {
            var calendar = document.getElementById(tab.id + "-Content").querySelectorAll('div[id^="Calendar-"]');
            calendar.forEach(redrawCalendar)
        } catch (e) {
            console.log('No calendars available.');
        }
    }
});

// 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>

I'm basically finding all calendars on the given tab using querySelectorAll and then for each calendar on the tab I'm running redrawCalendar function which based on the HTML DOM ID finds the correct calendar object, and resets its view making sure the visual part is重新启动并运行。

Answer 2

当用户尝试切换到下一个选项卡时，您可以即时创建calendar2 。 监听tab上的change event ，并根据calendarID初始化第二个日历。

 var calendarid = document.getElementById(tab.id + "-Content").querySelector('div[id^="Calendar-"]').id;
                    // alert("The calendarid " + calendarid);
                  if(calendarid == 'Calendar-3fso0g65') {
                    loadCalendarFirst(calendarid);
                  } else {
                    loadCalendarSecond(calendarid);
                  }
                    

我添加了以下两个方法在需要时调用

<script>
        function loadCalendarFirst(claendarID) {
          var calendarEl = document.getElementById(claendarID);
                    var calendar = new FullCalendar.Calendar(calendarEl,
                        {
                            "headerToolbar": {
                                "left": "prev,next,today",
                                "right": "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
                                "center": "title"
                            },
                            "initialView": "listWeek",
                            "initialDate": "2020-07-19",
                            "nowIndicator": true,
                            "navLinks": true,
                            "businessHours": false,
                            "editable": false,
                            "events": [
                                {
                                    "title": "Active Directory Meeting",
                                    "description": "We will talk about stuff",
                                    "start": "2020-07-19T10:07:02"
                                },
                                {
                                    "title": "Lunch",
                                    "description": "Very long lunch",
                                    "start": "2020-07-21T07:07:02",
                                    "end": "2020-07-22T10:07:02"
                                }
                            ],
                            "dayMaxEventRows": true,
                            "weekNumbers": true,
                            "weekNumberCalculation": "ISO",
                            "selectable": true,
                            "selectMirror": true,
                            "buttonIcons": false,
                            "views": {
                                "listWeek": {
                                    "buttonText": "list week"
                                },
                                "listMonth": {
                                    "buttonText": "list month"
                                },
                                "listDay": {
                                    "buttonText": "list day"
                                }
                            },
                            eventRender: function (info) {
                                var tooltip = new Tooltip(info.el, {
                                    title: info.event.extendedProps.description,
                                    placement: 'top',
                                    trigger: 'hover',
                                    container: 'body'
                                });
                            }
                        }
                    );
                    calendar.render();
        }
        
        function loadCalendarSecond(calendarID) {
                    var calendarEl = document.getElementById(calendarID);
                    var calendar = new FullCalendar.Calendar(calendarEl,
                        {
                            "headerToolbar": {
                                "left": "prev,next,today",
                                "right": "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
                                "center": "title"
                            },
                            "initialDate": "2020-07-19",
                            "nowIndicator": true,
                            "navLinks": true,
                            "businessHours": false,
                            "editable": false,
                            "events": [
                                {
                                    "title": "Active Directory Meeting",
                                    "description": "We will talk about stuff",
                                    "start": "2020-07-19T10:07:02"
                                },
                                {
                                    "title": "Lunch",
                                    "description": "Very long lunch",
                                    "start": "2020-07-21T07:07:02",
                                    "end": "2020-07-22T10:07:02"
                                }
                            ],
                            "dayMaxEventRows": true,
                            "weekNumbers": true,
                            "weekNumberCalculation": "ISO",
                            "selectable": true,
                            "selectMirror": true,
                            "buttonIcons": false,
                            "views": {
                                "listWeek": {
                                    "buttonText": "list week"
                                },
                                "listMonth": {
                                    "buttonText": "list month"
                                },
                                "listDay": {
                                    "buttonText": "list day"
                                }
                            },
                            eventRender: function (info) {
                                var tooltip = new Tooltip(info.el, {
                                    title: info.event.extendedProps.description,
                                    placement: 'top',
                                    trigger: 'hover',
                                    container: 'body'
                                });
                            }
                        }
                    );
                    calendar.render();
        }
        
        loadCalendarFirst('Calendar-3fso0g65');
      </script>

这是更新的 Plunker

Answer 3

该错误表明您尝试运行fullCalendar() function 的元素不可用。 这意味着在文档中找不到 ID 为Calendar-on26xq0w的 HTML 元素。