Событие полного календаря для модального диалогового окна начальной загрузки не работает

Я использую этот fullcalendar-scheduler. Я пытаюсь добавить диалоговое окно Modal Popup для этого события, у меня не работает, пожалуйста, помогите мне решить эту проблему.

функция события

eventClick:  function(event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href',event.url);
            $('#calendarModal').modal();
        },

это мой код

 <script>

    $(function() { // document ready

        $('#calendar').fullCalendar({
            now: '2017-12',
            editable: true, // enable draggable events
              height: 'auto',
            header: {
                left: 'today prev,next',
                center: 'title',
                right: 'timelineMonth,timelineYear'
            },
            defaultView: 'timelineThreeDays',
               navLinks: true,
              resourceAreaWidth: '15%',
            views: {
                timelineThreeDays: {
                    type: 'timeline',
                    duration: { days: 31}
                }
            },
            resourceLabelText: 'Single Rooms (8)',

            resources: [
                { id: 'a', title: 'Room # 1' },
                { id: 'b', title: 'Room # 2', eventColor: 'green' },
                { id: 'c', title: 'Room # 3', eventColor: 'orange' },
                { id: 'd', title: 'Room # 4', children: [

                ] },
                { id: 'e', title: 'Room # 5' },
                { id: 'f', title: 'Room # 6', eventColor: 'red' },
                { id: 'g', title: 'Room # 7', eventColor: 'orange'  },
                { id: 'h', title: 'Room # 8',eventColor: 'green'  },

            ],
            events: [

                // normal events...
                { id: '1', resourceId: 'a', start: '2017-12-01', end: '2017-12-07', title: 'Mahesh' },
                { id: '2', resourceId: 'b', start: '2017-12-12', end: '2017-12-15', title: 'Anushka' },
                { id: '3', resourceId: 'c', start: '2017-12-11', end: '2017-12-15', title: 'Ramesh' },
                { id: '4', resourceId: 'd', start: '2017-12-11', end: '2017-12-19', title: 'Susena' },
                { id: '5', resourceId: 'e', start: '2017-12-15', end: '2017-12-28', title: 'Lahiru' },
                { id: '6', resourceId: 'f', start: '2017-12-01', end: '2017-12-10', title: 'Chamath' },
                { id: '7', resourceId: 'g', start: '2017-12-10', end: '2017-12-11', title: 'Channa' },
                { id: '8', resourceId: 'h', start: '2017-12-09', end: '2017-12-14', title: 'Ganesh' }
            ],

eventClick:  function(event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href',event.url);
            $('#calendarModal').modal();
        },
        });
    });

</script>

Модальный

<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
            <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div id="modalBody" class="modal-body"> </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
    <!-- Modal -->

заранее спасибо


jquery twitter-bootstrap fullcalendar fullcalendar-scheduler
person core114    schedule 12.12.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

OMG, пока работает, это просто моя ошибка,

до >> Я привык bootstrap.js

теперь меня заменили bootstrap.min.js

теперь работает :)

person core114    schedule 12.12.2017
comment
вы уверены, что это проблема? Между этими двумя файлами не должно быть функциональной разницы. Один является просто сжатой версией другого. Единственная причина, по которой это может привести к изменению, заключается в том, что: а) файлы на самом деле являются копиями разных версий Bootstrap или б) на вашей веб-странице уже была ссылка <script, которая ожидала .min.js, и вы не включили ее в свое развертывание. Было ли это связано с одной из этих проблем? В противном случае я не вижу, как это будет иметь какое-либо значение. - person ADyson; 12.12.2017
comment
Я знаю, что это сработало для вас, но я спрашивал почему. Я назвал две возможные причины. Было ли это одной из этих причин? Или что-то другое? Возможно, будущим читателям будет полезно понять, в чем заключалась основная проблема. - person ADyson; 12.12.2017
comment
понял, это моя ошибка, я добавил `bootstrap.js` для calendar.html, но моя домашняя страница всегда используется bootstrap.min.js, после того, как я удалил bootstrap.js` и снова добавил bootstrap.min.js для календаря.html - person core114; 12.12.2017

arrow_upward
0
arrow_downward

Это происходит из-за того, что любой элемент DOM внутри модального элемента (Bootstrap Modals) будет скрыт, поэтому объект календаря не будет отображаться. Обходным путем для этого является запуск календаря после события щелчка на переключателе.

# HTML
<button id="toggler" data-toggle="modal" data-target="#modal_calendar"></button>

<div id="modal_calendar" class="modal" role="dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="calendar"></div>
        </div>
    </div>
</div>


# Script
<script>
    (function($){

        $('#toggler').on('click', function(){
           $('.calendar').fullCalendar();
        })

    })(jQuery)
</script>
person Wolfgang Leon    schedule 26.03.2018