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

Javascript FullCalendar 4.X和RRule插件使用脚本标记和浏览器全局方法时出现问题,javascript,fullcalendar,fullcalendar-4,rrule,Javascript,Fullcalendar,Fullcalendar 4,Rrule,我正在尝试使用脚本标记将FullCalendar 4.3.1与rrule.js一起使用。根据[: “如果您使用的是标记和全局浏览器,则必须确保 来自rrule站点的原始非插件rrule.js dist文件是 首先包含在您的页面上。“ 我已经完成了。在我的日历初始化JS中,我有: /*js/myCalendar4.js*/ $( function(e) { var calendarEl = document.getElementById('calendar');

我正在尝试使用脚本标记将FullCalendar 4.3.1与rrule.js一起使用。根据[:

“如果您使用的是标记和全局浏览器,则必须确保 来自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"
            });
}


完整日历4.3.1

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

我将重新引用您在问题中提到的完整日历文档,但我将使用粗体文本特别强调一个词:

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

我认为你的错误只是把它放在第二位(在fullCalendar文件之后),而不是第一位。fullCalendar插件脚本无疑会检查rrule.js库是否存在。由于找不到它,它将无法加载


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

这将显示最简单的事情是如何让您绊倒的。感谢您的回答。
<!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>