我正在使用带有 angularJS 和 angularstrap 的 jquery 完整日历。问题似乎是只有当我单击日历中的一个按钮或调整浏览器窗口大小时才会显示日历。此日历正在加载到使用 angularstrap 初始化的模式框中。
我很感激帮助。
Plunkr在这里：链接
模态 HTML 在 search_modal.html 日历控制器是：calendarCtrl.js 父控制器是 search.js
编辑：在我尝试实现的谷歌地图和画廊遇到同样的问题后，我认为这不是与日历直接相关的问题，而是与模式框本身更相关的问题。任何交互式且涉及 javascript 的内容都无法根据模态框的大小正确缩放。有人对如何解决这个问题有任何想法吗？
只是为此添加另一个答案。我在引导选项卡中使用 fullcalendar。为了渲染日历，我添加了：
$('a#id-of-tab').on('shown.bs.tab', function (e) {
$("#the-calendar-container").fullCalendar('render');
});
您的问题似乎类似于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">
在插入日历之前删除 display:none （给空间）将解决您的问题。将上面的代码添加#search_modal-003 {display:block; }到您的自定义 css 中。
问题是日历被初始化，而模式不可见。如果模态在控制器中，您可能会使用$scope.$on('modal-shown', function() {});以某种方式触发calendar('render');.
我想不出一种检测能见度的方法。我尝试在 on 指令中使用 $watch elm.is(':visible')，但在加载时只能检查 2 次。
我在使用基础选项卡时遇到了同样的问题。我的日历在第二个标签中。我所做的是，当用户单击选项卡时，我在 setTimeout 内模拟“今天”按钮单击，延迟非常小。这解决了我的问题
我制作了一个自定义指令和一个工厂来控制何时显示和隐藏日历。当calendarFactory.isVisible设置为 时true，您调用fullCalendar的渲染函数。
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
scope.$watch(function (scope) {
return calendarFactory.isVisible;
}, function (newValue, oldValue) {
if(newValue === true)
$(element).fullCalendar('render');
代码片段是从生产中重新制作的，可能并不完全正确，但想法是正确的。您应该使用$scope.$emitand$scope.$on而不是$watch顺便说一句。
解决方案#2 是ui-calandar 我现在将它用于我们自己的项目，它可以很好地进行快速集成，但我建议您使用自己的自定义指令以提高灵活性。我们做一些事情，比如双日历视图、客户端本地化、自定义选择背景颜色、用于导航多个视图的自定义标题。如果你需要这样的东西，我建议替代#1。而且我真的不知道如何编写指令。所以不要气馁！最难的部分是让 FullCalendar 动态渲染。
您需要指定完整日历的高度，例如
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
height: "parent"
});
calendar.render();
});
使用 settimeout 功能延迟日历的加载，然后它将起作用。