使用脚本标签和浏览器全局方法的 FullCalendar 4.X 和 RRule 插件出现问题

Question

我正在尝试使用带有脚本标签的 rrule.js 使用 FullCalendar 4.3.1。根据[https://fullcalendar.io/docs/rrule-plugin][1]：

"如果你使用标签和浏览器全局变量，你必须确保 来自 rrule 站点的原始非插件 rrule.js dist 文件是 首先包含在您的页面上。”

我已经完成了。在我的日历初始化 JS 中，我有：

/*js/myCalendar4.js*/
$(
    function(e) {
        var calendarEl = document.getElementById('calendar');
        _parentCalendar =   new FullCalendar.Calendar(calendarEl,   
                                {
                                    plugins     :   ['interaction','dayGrid', 'timeGrid', 'rrule'],
                                    selectable  :   true,
                                    header      :   {
                                                        left    :'prevYear, prev',
                                                        center  :'title',
                                                        right   :'today, next, nextYear'
                                                    },
                                    dateClick   :   function(dInfo) {
                                                        swal({
                                                            title   :   "Calendar Date Click",
                                                            text    :   dInfo.dateStr,
                                                            icon    :   "info"
                                                        });
                                                    },
                                    select      :   function(dInfo) {
                                                        swal({
                                                            title   :   "Calendar Date Selection",
                                                            text    :   dInfo.startStr + " to " + dInfo.endStr,
                                                            icon    :   "info"
                                                        });
                                                    },
                                    eventClick  :   eventClickHandler,
                                    eventDrop   :   eventDropHandler,

                                    defaultView :   'dayGridMonth',
                                    weekends    :   true,
                                    timeZone    :   'America/New_York',
                                    eventLimit  :   true,
                                    eventLimitText  :   "hidden events",
                                    events      :   [
                                                {
                                        title:  'My RRule Recurring Event',
                                        rrule:'DTSTART:2019-10-29T05:30;FREQ=DAILY;INTERVAL=1;COUNT=5',
                                        duration    :   '10:00'
                                    }
                                                    ],
                                    loading     :   function(isLoading) {
                                                        if (isLoading)  {
                                                            calBlock("Loading calendar events ...");
                                                        }
                                                        else    {
                                                            calUnblock();
                                                        }
                                                    },
                                    eventRender :   function(eventInfo) {
                                                        console.log("Rendered Info: ", eventInfo);
                                                    }
                                }
                            );
                    _parentCalendar.render();

                }

);




function calBlock(messageText)  {
    $("body").block({message: messageText});

}


function calUnblock()   {
    $("body").unblock();
}



function failureMethod(x)   {
                    calUnblock();
                    swal({
                        title   :   "Calendar Retrieval Error!",
                        text    :   x.message + "!",
                        icon    :   "error"
            });
}

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<title>FullCalendar 4.3.1</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" type="image/png" href="images/favicon.png"/>
<script type="text/javascript" src="/webtools/JSCentral/JQuery/jquery-1.10.2.min.js"></script>

<script src="js/moment.js"></script>
<script src="js/fullcalendar/4.3.1/packages/core/main.js"></script>
<script src="js/fullcalendar/4.3.1/packages/daygrid/main.js"></script>
<script src="js/fullcalendar/4.3.1/packages/timegrid/main.js"></script>
<script src="js/fullcalendar/4.3.1/packages/interaction/main.js"></script>

<script src="js/fullcalendar/4.3.1/packages/rrule/main.js"></script>
<script src="js/rrule/rrule.js"></script>

<script src="js/sweet-alert/sweet-alert.min.js"></script>
<script src="js/myCalendar4.js"></script>
<script src="js/calendar4_action_handlers.js"></script>
<script type="text/javascript" src="js/blockUI.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" type="text/css" href="css/sweet-alert2.css">
<link rel="stylesheet" type="text/css" href="/webtools/JSCentral/JQuery/jquery-ui-1.9.1.custom/css/smoothness/jquery-ui-1.9.1.custom.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="css/balloon-tooltip.css">
<link rel="stylesheet" type="text/css" href="css/master.css">

<link href="js/fullcalendar/4.3.1/packages/core/main.css" rel="stylesheet">
<link href="js/fullcalendar/4.3.1/packages/daygrid/main.css" rel="stylesheet">
<link href="js/fullcalendar/4.3.1/packages/timegrid/main.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.css">
<link href="css/calendar.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
<link rel="stylesheet" type="text/css" href="css/sweet-alert2.css">

</head>
<body>
    <div id="calendar"></div>
</body>
</html>

我能够成功加载/显示日历并使用它，除了加载包含 rrule 循环指令的测试事件。我在调试器中收到一个错误，说它无法加载插件文件。 FullCalendar 4.3.1 似乎带有一个 JS 脚本，包括：4.3.1/packages/rrule/main.js。所以，我想知道应该使用哪一个来适应 RRule。我尝试在插件部分删除对“rrule”的引用。但是，事件仍然没有加载。关于我做错了什么有什么想法吗？

Answer 1

我将在https://fullcalendar.io/docs/rrule-plugin 重新引用您在问题中提到的相同的完整日历文档，但我将使用粗体文本特别突出显示一个单词：

如果您使用标签和浏览器全局变量，您必须确保 来自 rrule 站点的原始非插件 rrule.js dist 文件是 首先包含在您的页面上。

我认为您的错误只是将它包含在第二个（在 fullCalendar 文件之后）而不是第一个。 fullCalendar 插件脚本无疑会检查 rrule.js 库是否存在。由于找不到它，它将无法加载。

不要忘记，浏览器在解析每个脚本标签时会立即加载并执行每个脚本块，并且它会按照标签在 HTML 标记中出现的顺序依次执行。