Question

我正在尝试根据this和this解决方案在Djnago中为fullcalendar设置html模式，但是模式不会显示[没有弹出窗口]。我尝试根据link找到解决方案，但没有结果。

谢谢您的解决方案。

包导入：

<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>

Answer 1

我已经更新了bootstrap并将bootstrap.css添加到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/

全日历模态不显示

1 个答案: