blocks|key|1762362|text|问题是日历是初始化的，而模式是不可见的。如果模态在控制器中，您可能会使用$scope.$on('modal-shown',+function()+{});以某种方式触发calendar('render');。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1762363|我想不出一种检测能见度的方法。我尝试在elm.is(':visible')上的指令中使用$watch，但在加载时只能检查两次。|1762364|entityMap^0|10|15|2C|J|0|J|I|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

The problem is that the calendar is initialized while the modal is not visible. If the modal was in a controller, you could potentially use <code>$scope.$on('modal-shown', function() {});</code> to somehow trigger <code>calendar('render');</code>.

I couldn't figure out a way to detect visibility. I tried using a $watch in the directive on <code>elm.is(':visible')</code>, but could only get it to check 2 times, when it loaded.

blocks|key|1762393|text|您的问题似乎与How+can+I+list+two+Linkedin+Follow+Buttons+in+a+Twitter+Bootstrap+Dropdown类似|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1762394|您的模式由以下各项设置：|1762395|+<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">|code-block|syntax|javascript|1762396|在插入日历之前删除显示:无(留出空格)将解决您的问题。使用上述b.e.代码。将#search_modal-003+{display:block;+}添加到您的自定义css。|style|CODE|1762397|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/16905807/how-can-i-list-two-linkedin-follow-buttons-in-a-twitter-bootstrap-dropdown/^0|7|22|0|0|0|0|13|Z|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@$A|13|B|14|M|N]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

Your problem seems to be similar to <a href="https://stackoverflow.com/questions/16905807/how-can-i-list-two-linkedin-follow-buttons-in-a-twitter-bootstrap-dropdown/">How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown</a> 

Your modal is set by:

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

Removing the display:none (give space) before the calendar insert will fix your problem.
With the code above b.e. add <code>#search_modal-003 {display:block; }</code> to your custom css.

blocks|key|1762433|text|我已经制定了一个自定义指令和一个工厂来控制何时显示和隐藏日历。当calendarFactory.isVisible设置为true时，调用fullCalendar的render函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1762434|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');|code-block|syntax|javascript|1762435|1762436|代码片段是从产品中重新制作的，可能并不完全正确，但其想法是正确的。您应该使用$scope.$emit和$scope.$on，而不是$watch+btw。|1762437|解决方案#2是ui-calandar我现在正在为我们自己的项目使用它，它可以很好地快速集成，但为了灵活性，我建议您使用自己的自定义指令。我们做的事情，如双日历视图，客户端本地化，自定义选择背景色，自定义标题导航多个视图。如果你需要这样的东西，我建议选择#1。我真的不知道怎么写指令。所以不要灰心！最困难的部分是让FullCalendar动态呈现。|1762438|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular-ui/ui-calendar^0|W|P|1O|4|1W|C|0|0|0|12|C|1F|A|1T|6|0|7|B|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|P|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

I have made a custom directive and a factory to control when to show and hide the calendar. When <code>calendarFactory.isVisible</code> is set to <code>true</code>, you call <code>fullCalendar</code>'s render function.

<pre><code>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');
</code></pre>

<hr>

Code snippet is remade from production and might not be entirely correct, but the idea is. You should use <code>$scope.$emit</code> and <code>$scope.$on</code> instead of <code>$watch</code> btw.

Solution #2 would be <a href="https://github.com/angular-ui/ui-calendar" rel="nofollow">ui-calandar</a>
I'm using it now for our own project and it can be nice for quick intergration, but I would suggest your own custom directive for flexibility. We do things like double calendar views, clientside localization, custom selection background-color, custom header for navigating multiple views. 
If you need things like that, I suggest alternative #1.
And I really don't know how to write directives. So don't get discouraged! The hardest part will be getting FullCalendar to render dynamically.

blocks|key|3886618|text|使用settimeout函数来延迟加载日历，然后它就可以工作了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3886619|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Use settimeout function to delay load of the calendar then it will work.

blocks|key|1762531|text|我在基础标签上也遇到了同样的问题。我的日历在第二个标签里。我所做的是，当用户点击标签时，我模拟了setTimeout内的“今天”按钮点击，延迟非常小。这解决了我的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1762532|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I faced the same problem with foundation tab. Where my calendar was in second tab. What I did was, when user is clicking on the tab I simulated "Today" button click within a setTimeout with very minimal delay. This solves my problem

blocks|key|3886722|text|只是为了给这个问题添加另一个答案。我在bootstrap选项卡中使用了完整的日历。为了渲染日历，我添加了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3886723|$('a#id-of-tab').on('shown.bs.tab',+function+(e)+{
++++$("#the-calendar-container").fullCalendar('render');
});|code-block|syntax|javascript|3886724|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just to add another answer to this. I was using fullcalendar in a bootstrap tab. In order to render the calendar, I added:

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

blocks|key|563955|text|您需要指定完整日历的高度，例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|563956|document.addEventListener('DOMContentLoaded',+function()+{
++var+calendarEl+=+document.getElementById('calendar');
++var+calendar+=+new+FullCalendar.Calendar(calendarEl,+{
++++plugins:+[+'dayGrid'+],
++++height:+"parent"
++});
++calendar.render();
});|code-block|syntax|javascript|563957|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You need to specify the height of the full calendar e.g.

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

I'm using jquery full calendar with angularJS and angularstrap. The problem it seems is that the calendar will only display when I either click on one of the buttons in the calendar or resize the browser window. This calendar is being loaded in a modal box initialised using angularstrap.

I appreciate the help.

Plunkr here: <a href="http://plnkr.co/edit/EMrBU8mIFVeQSGZAIf8A?p=preview" rel="noreferrer">LINK</a>

Modal HTML is in search_modal.html Calendar controller is:calendarCtrl.js Parent controller is search.js

Edit: After experiencing the same problem with google maps and a gallery I've attempted to implement I dont think this is a problem directly related to the calendar rather its more related to the modal box itself. Anything thats interactive and involves javascript does not scale properly according to the size of the modal box. Anyone have any ideas on how to fix this?

fullcalendar not visible until button is clicked or window resized?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用带有angularJS和angularstrap的jquery完整日历。问题似乎是，只有当我单击日历中的一个按钮或调整浏览器窗口的大小时，日历才会显示。此日历被加载到使用angularstrap初始化的模式框中。我很感谢你的帮助。点击此处：Modal在search_modal.html日历控件中，is:cal...

问全日历不可见，直到单击按钮或调整窗口大小？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全日历不可见，直到单击按钮或调整窗口大小？EN