Javascript 如何在boostrap模式中实现和显示fullcalendar事件

我正在为我的新网站实现一个日历 我从后端应用程序检索事件，并使用fullcalendar在模式中显示结果。 一切正常，但当我打开并显示模式/日历时，事件不会呈现在日历上，直到我按下“下一步”或“上一步”按钮

我已经尝试以编程方式呈现日历、重新渲染、下一个或上一个

这是我的日历代码， 当然，“日历结果”是模态对话框的模态体

var calendarResultsEl = document.getElementById('calendar-results');
calendarResults = new FullCalendar.Calendar(calendarResultsEl, {
    plugins: ['interaction','timeGrid', 'list'],
    defaultView: 'timeGridWeek',
    slotDuration:'01:00:00',
    scrollTime : '08:00:00',
    firstDay: 1, 
    height:'parent',
    handleWindwoResize:true,
    header: {
        left:   '',
        center: 'title',
        right:  'today prev,next'
    },
        events: elements,
    eventMouseEnter : function(info)
    {
        var element = info.el;
        element.setAttribute('data-html', 'true');
        element.setAttribute('data-container', 'body');
        element.setAttribute('data-rel', 'popover')
        element.setAttribute('data-trigger', 'hover');
        element.setAttribute('data-content', "<font size='3'><b>Start :</b>" + info.event.start + "<br>" + "<b>End :</b>" + info.event.end + "<br></font>");
        element.setAttribute('data-placement', 'top');
        element.setAttribute('data-title', "<font size='6'>" + info.event.id + "</font>");
        $(function () { 
            $("[data-rel=popover]").popover();   
        });
    },
    columnHeaderFormat:{
        weekday:'long',
        day:'numeric',
        month:'long'
    },
    eventClick : function(info){
        $("#startTime").val(moment.utc(info.event.start));
        $("#endTime").val(moment.utc(info.event.end));
        $("#name").val(info.event.title);
        $("#eventInfo").html(info.event.description);
        $("#eventLink").attr('href', info.event.url);
        $("#eventContent").modal('show');
    }
});
calendarResults.render();

当然，这个事件对象不会出现问题， 我打了个手势来表示我的问题。 除非按prev/next，否则不会显示当前周的事件。 另外，更改结果窗口的大小将显示事件

有人成功地将日历显示为boostrap模式吗？ 也许我应该检查按下按钮时触发的事件，并在日历渲染后以编程方式执行相同的操作。

---

有什么建议吗？

在按钮代码中，您可以手动强制窗口调整大小事件：

// When the user clicks on the button, open the modal
btn.onclick = function() {

  modal.style.display = "block";
  window.dispatchEvent(new Event('resize'));

}

---

这是可行的，但是这种处理情态动词的方式；直接操纵样式，不是最优雅的方式。你应该考虑检查Bootstrap的模态文档，或者至少使用一个库来处理模态功能。

谢谢你的回答，我试过了，它确实有效，正如你所说的那样，用这种方式打开模态是不太优雅的。我会用定义boostrap模式的正确方法编辑我的文件。我还模糊地记得modals中的某些内容问题，因为一些插件（如日历等）希望在初始化之前内容是可见的。调整大小的黑客可能确实是目前最简单的方法。

// When the user clicks on the button, open the modal
btn.onclick = function() {

  modal.style.display = "block";
  window.dispatchEvent(new Event('resize'));

}