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

问题是在模态不可见时初始化日历。如果模态位于控制器中，您可能会使用$scope.$on('modal-shown', function() {});以某种方式触发calendar('render');。

我无法找到一种检测能见度的方法。我尝试在elm.is(':visible')的指令中使用$ watch，但只能在加载时检查2次。

Answer 3

您的问题似乎与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（提供空格）将解决您的问题。使用上面的代码b.e.将#search_modal-003 {display:block; }添加到您的自定义CSS。

Answer 4

我遇到了与基础选项卡相同的问题。我的日历在第二个标签中的位置。我所做的是，当用户点击选项卡时，我模拟了“今天”按钮，在一个setTimeout内点击，延迟非常小。这解决了我的问题

Answer 5

我制作了一个自定义指令和一个工厂来控制何时显示和隐藏日历。当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.$emit和$scope.$on代替$watch btw。

解决方案＃2将是ui-calandar 我现在正在将它用于我们自己的项目，它可以很好地进行快速集成，但我会建议您自己的自定义指令以获得灵活性。我们执行双日历视图，客户端本地化，自定义选择背景颜色，用于导航多个视图的自定义标题等操作。如果你需要这样的东西，我建议替代＃1。我真的不知道如何写指令。所以不要气馁！最难的部分是让FullCalendar动态渲染。

Answer 6

您需要指定完整日历的高度，例如

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    height: "parent"
  });
  calendar.render();
});

Answer 7

使用settimeout函数延迟日历的加载然后它将起作用。

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

7 个答案: