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

Question

我正在尝试通过脚本标签将 FullCalendar 4.3.1 与 rrule.js 结合使用。根据 [https://fullcalendar.io/docs/rrule-plugin][1]:

"If you are using tags and browser globals, you must ensure the original non-plugin rrule.js dist file from the rrule site is included on your page first."

我已经做到了。在我的日历初始化 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 重复指令的测试事件外，我能够成功地 load/display 日历并使用它。我在调试器中收到一条错误消息，说它无法加载插件文件。 FullCalendar 4.3.1 似乎附带一个 JS 脚本，包括：4.3.1/packages/rrule/main.js。所以，我想知道应该使用哪一个来容纳 RRule。我尝试删除插件部分中对 'rrule' 的引用。但是，事件仍然没有加载。关于我做错了什么有什么想法吗？

Answer 1

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

If you are using tags and browser globals, you must ensure the original non-plugin rrule.js dist file from the rrule site is included on your page first.

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

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

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

Trouble With FullCalendar 4.X and RRule Plugin Using Script Tags and Browser Globals Method

javascript

fullcalendar

fullcalendar-4

rrule