我正在为我的新网站实现日历 我从 BackEnd 应用程序检索事件并使用 fullcalendar 在模式中显示结果。 一切正常,但当我打开并显示模态/日历时,事件不会呈现在日历上,直到我按下一个或上一个按钮。
我已经尝试以编程方式呈现日历、重新呈现、下一个或上一个。
这是我的日历代码, 当然,'calendar-results' 是模态对话框的模态主体
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();
这是我的事件对象:
[
{
"end": "2019-03-11T19:02:00.000Z",
"id": 0,
"start": "2019-03-11T04:32:00.000Z"
},
{
"end": "2019-03-12T19:02:00.000Z",
"id": 1,
"start": "2019-03-12T04:32:00.000Z"
},
{
"end": "2019-03-13T19:02:00.000Z",
"id": 2,
"start": "2019-03-13T04:32:00.000Z"
},
{
"end": "2019-03-14T19:02:00.000Z",
"id": 3,
"start": "2019-03-14T04:32:00.000Z"
},
{
"end": "2019-03-15T19:02:00.000Z",
"id": 4,
"start": "2019-03-15T04:32:00.000Z"
},
{
"end": "2019-03-18T19:02:00.000Z",
"id": 5,
"start": "2019-03-18T04:32:00.000Z"
}
]
这个事件对象当然不会出现这个问题, 我做了一个 jsFiddle 来显示我的问题。 除非您按上一个/下一个,否则不会出现本周的事件。 此外,更改结果窗口的大小会显示事件。
https://jsfiddle.net/Marech/2Lqgewdc/7/
有人成功地将日历显示到 boostrap 模态中吗? 也许我应该检查按下按钮时触发的事件,并在日历呈现后以编程方式执行相同的操作。 有什么建议吗?
最佳答案
在您的按钮代码中,您可以手动强制执行窗口调整大小事件:
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
window.dispatchEvent(new Event('resize'));
}
这行得通,但是这种处理模式的方式;直接操纵样式,不是最优雅的方式。您应该考虑查看 Bootstrap 的模态文档,或者至少使用一个库来处理模态功能。
关于javascript - 如何在 Bootstrap 模式中实现和显示完整的日历事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56740763/