单击时FullCalendar自动填充事件

时间:2019-09-09 10:17:17

标签: javascript

我使用Bootstrap Modal创建了FullCalendar,但是单击后显示的数据从一个modal传输到另一个。

首先,所有事件都具有正确的数据。但是,如果我单击事件,请关闭它并打开另一个 ,则第一个事件的上下文将显示在第二个事件的内部。

任何想法可能出在哪里?

JS基本元素

<script>
    function loadCalendar() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            // setup local parameters
            selectable: true,
            plugins: ['interaction', 'dayGrid'],
            firstDay : 1,
            header: {
                left: 'today',
                center: 'title',
                right: 'prev, next',
            },
            // load all events
            events: [
                {% for event in events %}
                    {
                        id: '{{event.id}}',
                        user: '{{event.user}}',
                    },
                {% endfor %}
            ],
            eventClick: function(event) {
                console.log('modal', event);
                $('#modal_window').modal();
                $('#modal_title').html(event.event.extendedProps.client_name);
                }
            },
        });
        calendar.render();
    };

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

引导程序

<!-- Calendar-->
<div id='calendar'></div>

<!-- Modal -->
<div id="modal_window" class="modal fade bd-example-modal-sm">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <p id="modal_title"></p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

谢谢大家的时间。

0 个答案:

没有答案
相关问题