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 noob，所以我不清楚为什么它不起作用。我对DataTables使用了类似的方法（Try / catch），并且工作正常（如果已加载DataTable）

编辑：

我尝试搜索日历ID-我可以找到它，但是在第三行上仍然看到相同的错误。

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没有我尝试使用的方法

如果根据标签使用全日历v5，则 $（'＃Calendar-on26xq0w'）。fullCalendar永远无法工作-那就是 fullCalendar v3的语法（以前是jQuery插件，因此 jQuery样式选择器以初始化对象）。如果你想调用v4或v5中的方法，则需要引用该对象在初始化日历时创建，然后获取当前视图，您可以简单地编写calendar.view（它是一个属性，而不是函数）-请参见fullcalendar.io/docs/Calendar-view。（没有这样的在v5中也可以用作getView。）

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

在最上方定义的空对象

<!-- 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将这个日历对象与键一起存储了。

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>

我基本上是使用querySelectorAll在给定标签上找到所有日历，然后针对该标签上的每个日历运行redrawCalendar函数，该函数基于HTML DOM ID找到正确的日历对象，并重置其日历对象查看以确保视觉部分重新启动并运行。

Answer 2

当用户尝试切换到下一个标签时，您可以即时创建日历2 。在change event上收听tab，然后根据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>

这里是Updated Plunker

Answer 3

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

未捕获的TypeError：$（...）。fullCalendar不是函数错误

3 个答案: