在单击按钮或调整窗口大小之前,fullcalendar不可见？

Question

我正在使用带有angularJS和angularstrap的jquery完整日历.似乎问题是只有当我点击日历中的一个按钮或调整浏览器窗口大小时才会显示日历.此日历正在使用angularstrap初始化的模式框中加载.

我很感激帮助.

Plunkr:LINK

模态HTML位于search_modal.html中.日历控制器是:calendarCtrl.js父控制器是search.js

编辑:经历了谷歌地图和我试图实现的画廊相同的问题后,我不认为这是一个与日历直接相关的问题,而是与模式框本身更相关.任何交互式和涉及javascript的东西都不能根据模态框的大小正确缩放.任何人都有任何想法如何解决这个问题？

Answer 1

只是为此添加另一个答案.我在bootstrap选项卡中使用fullcalendar.为了呈现日历,我补充说:

$('a#id-of-tab').on('shown.bs.tab', function (e) {
    $("#the-calendar-container").fullCalendar('render');
});

Answer 2

您的问题似乎类似于How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown

您的模态由以下方式设置：

 <a data-bs-modal="'search_modal.html'" href="#" class="ng-scope" data-target="#search_modal-003" data-toggle="modal">Search</a>
 <div id="search_modal-003" class="modal hide fade ng-scope in" tabindex="-1" aria-hidden="false">

在日历插入之前删除显示：无（留出空间）将解决您的问题。将上面的代码添加#search_modal-003 {display:block; }到您的自定义 css 中。