全日历模态不显示

本文介绍了全日历模态不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在根据此为此 a>和此解决方案，但模式是不显示[没有弹出窗口].我尝试根据链接找到解决方案，但没有结果.

I'm trying to setup html modal for fullcalendar in Djnago according to this and this solution, but modal is not displayed [no popup window].I try to find solutions according to link, but with no results.

谢谢您的解决方案.

程序包导入:

<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

<link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js'></script>

脚本:

<script type='text/javascript'>

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'pl',
            selectable: true,
            plugins: ['interaction', 'dayGrid'],
            firstDay : 1,
            header: {
                left: 'today',
                center: 'title',
                right: 'prev, next',
            },
            events: [
                {% for event in events %}
                    {
                        id: '{{event.id}}',
                        title: '{{event.title}}',
                        description: '{{event.description}}',
                        start: '{{event.start_date|date:"Y-m-d"}}',
                        end: '{{event.end_date|date:"Y-m-d"}}',
                        color: {% if event.done %}'YellowGreen '{%else%}'SkyBlue '{%endif%},
                        allDay: false,
                    },
                {% endfor %}
            ],

            eventClick: function(event) {
                $('#fullCalModal').modal();
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
            },

        });
        calendar.render();
    });
</script>

html:

<body>
    <div id='calendar'></div>
</body>

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
        </div>
    </div>
</div>

推荐答案

我更新了bootstrap并将bootstrap.css添加到HTML中.

I've updated bootstrap and added bootstrap.css into HTML.

一个文件代码:

<head>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

<link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js'></script>
</head>

<body>
    <div id='calendar'></div>
</body>

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
        </div>
    </div>
    Test
</div>

<script>

    function loadCalendar() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'pl',
            selectable: true,
            plugins: ['interaction', 'dayGrid'],
            firstDay : 1,
            header: {
                left: 'today',
                center: 'title',
                right: 'prev, next',
            },
            events: [
                {
              title: 'All Day Event',
              description: 'www',
              start: '2019-09-03'
                },
            ],

            eventClick: function(event) {
                console.log('modal', event);
                $('#fullCalModal').modal();
                $('#modalTitle').html(event.event.title);
                $('#modalBody').html(event.event.extendedProps.description);
            },

        });
        calendar.render();
    };

    if (document.readyState !== 'complete') {
            document.addEventListener('DOMContentLoaded', loadCalendar);
    } else {
            loadCalendar();
    }
</script>

在线工作示例: https://jsfiddle.net/m2xwphLj/

这篇关于全日历模态不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！