Question

我正在使用jQuery工具标签将我的页面划分为标签。其中一个选项卡包含jQuery Fullcalendar。因为我在页面最后加载JavaScript以提高速度并避免无格式内容的闪现，所以我使用display：none来隐藏最初看不见的选项卡。执行此操作时，fullcalendar无法正确呈现。它显示正确的按钮，但在我按下今日按钮之前，没有显示日历。如果我允许它渲染成可见的div，它会正确显示。

我可以使用选项卡选择事件来渲染日历，或者将日历和选项卡脚本移动到头部，但我宁愿有更合适的解决方案。

Answer 1

当div被隐藏时，fullCalendar不知道它应该呈现什么尺寸，所以你只需要在知道 div可见之后调用render函数。

将它附加到show事件或其他任何内容：

$('#calendar').fullCalendar('render');

Answer 2

您需要做的是在点击链接后加载数据，不完全确定，但我认为问题是加载数据后高度设置不正确，因此它只显示顶部。

我为我做了什么工作。

$(document).ready(function() {
    $("#calendareventlink").click ( function(){
      loadCalendar();
    });
});
function loadCalendar(){
  //Do your data loading here
}

<a href="" id="calendareventlink">View Calendar</a>

Answer 3

我知道这个问题很古老，但是当我在寻找同样问题的解决方案时，它首先出现了。出于某种原因，the proposed solution with render在某些特定情况下不起作用（如果非活动选项卡加载了日历条目），因此我必须refetchEvents。

代码如下：

$('#calendar').fullCalendar('render');
$('#calendar').fullCalendar('refetchEvents');

Answer 4

单击选项卡时，请调用以下内容：

$('#calendar').fullCalendar('render'); // Force the calendar to render

Answer 5

你必须使用javascript来设置display none fullcalendar

类似的东西：

                document.getElementById("test").style.display="none";

然后它看起来像这样：

<html>
<head>
    <link rel='stylesheet' type='text/css' href='bigcalendar.css' />
    <script type='text/javascript' src='jquery-1.8.1.min.js'></script>
    <script type='text/javascript' src='bigcalendar.js'></script>   

    <script type='text/javascript'>


        $(document).ready(function() {

            $('#bigCalendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: false,
                events: [{"id":111,"title":"Event1","start":"2012-11-10","url":"http:\/\/yahoo.com\/"},{"id":222,"title":"Event2","start":"2012-11-20","end":"2012-11-22","url":"http:\/\/yahoo.com\/"}]
            });

            document.getElementById("test").style.display="none";
        });





        function closeEventDetails(){

            $("#test").hide("fast");
        }



        function showBigCalendar(){

            $("#test").show("fast");

            //                $('#bigCalendar').fullCalendar( 'render' )

        }



        $(document).ready(function() {
        });

    </script>

    <style type='text/css'>

        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

        #bigcalendar {
            width: 900px;
            margin: 0 auto;
        }

    </style>

</head>
<body>


    <!--zobrazenie velkeho kalendara-->

    <button onclick="showBigCalendar();"  >open</button>
    <button  onclick="closeEventDetails();">close</button>

    <div id="test" ><div id="bigCalendar" ></div></div>


</body>

Answer 6

我无法点击“今天”按钮使日历实际显示在jQueryUI选项卡中。通过在初始化日历后初始化选项卡，我能够完全解决问题。但是，我在文档的头部这样做，并在body标签结束前调用所有其他js。希望有所帮助。

Answer 7

您还可以为日历的任何父/祖先元素调用.resize（） - 当您知道日历可见时;）

Answer 8

我将fullcalendar.min.js升级到最新版本（3.9.0），它对我有用。

Answer 9

我在使用easyappointments项目时遇到了类似的问题，解决方案是在显示下一个向导div后，在回调函数中调用 fullCalendar（'render'）。

jQuery代码：

 // Display the next step tab (uses jquery animation effect).
        var nextTabIndex = parseInt($(this).attr('data-step_index')) + 1;
  $('#button-next-1').click(function () {

         $(this).parents().eq(1).hide('fade', function () {
                 /* some code */
             $('#wizard-frame-' + nextTabIndex).show('fade');
              $('#calendar').fullCalendar('render');
         });
    });

HTML代码：

           <div id="wizard-frame-1" class="wizard-frame">

                 <div class="frame-container"  style="margin-top: 20px!important">/*some code*/</div>




                <div class="modal-footer fixedFooter p-l-10 p-r-10">
                           <button type="button" id="button-next-1" class="btn button-next btn-primary"
                            data-step_index="1">
                                     <?= lang('next') ?>
                                      <span class="glyphicon glyphicon-forward"></span>
                            </button>
                </div>

            </div>

Answer 10

你试过display：hidden而不是display：none？

不知道它是否有用，但值得尝试。

如何在隐藏的div中正确加载jQuery fullcalendar插件

10 个答案: