Проблема с FullCalendar 4.X и плагином RRule с использованием тегов сценариев и метода Globals браузера - PullRequest
Новая
       46

Проблема с FullCalendar 4.X и плагином RRule с использованием тегов сценариев и метода Globals браузера

0 голосов
/ 10 октября 2019

Я пытаюсь использовать FullCalendar 4.3.1 с rrule.js, используя теги скрипта. Согласно [https://fullcalendar.io/docs/rrule-plugin][1]:

"Если вы используете теги и глобальные переменные браузера, вы должны убедиться, что исходный файл dist-plugin rrule.js с сайта rule включен на вашей страницепервый. "

Что я и сделал. В моем 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» в разделе плагинов. Но событие все еще не загружается. Есть идеи, что я делаю не так?

1 Ответ

0 голосов
/ 11 октября 2019

Я буду цитировать ту же документацию fullCalendar на https://fullcalendar.io/docs/rrule-plugin, которую вы упомянули в своем вопросе, но я буду использовать жирный текст, чтобы выделить одно слово, в частности:

Если вывы используете теги и глобальные переменные браузера, вы должны убедиться, что оригинальный файл dist-plugin rrule.js с сайта rule включен на вашей странице first .

Я думаю, что ваша ошибкапросто включить его вторым (после файла fullCalendar), а не первым. Сценарий плагина fullCalendar, несомненно, проверит наличие библиотеки rrule.js. Поскольку он не может найти его, он не сможет загрузить.

Не забывайте, что браузер загружает и выполняет каждый блок скрипта немедленно , когда он анализирует каждый тег скрипта, и это происходит последовательно в порядке появления тегов в разметке HTML.

...