我使用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>
谢谢大家的时间。