如何正確加載隱藏div中的jQuery fullcalendar插件

我正在使用jQuery工具選項卡將頁面劃分爲選項卡。其中一個選項卡包含一個jQuery Fullcalendar。因爲我在頁面中加載JavaScript的最後速度並避免未格式化內容的閃爍，所以我使用display：none隱藏了最初看不到的標籤。這樣做時，fullcalendar無法正確呈現。它顯示了正確的按鈕，但在按下今天按鈕之前，沒有顯示日曆。如果我允許它呈現爲可見的div，它會正確顯示。如何正確加載隱藏div中的jQuery fullcalendar插件

我可以使用選項卡選擇事件來渲染日曆或將日曆和選項卡腳本移動到頭部，但我寧願如果有更合適的解決方案。

來源

2010-10-29 Jens Alm

你需要做的是在鏈接被點擊後加載數據，但不完全確定，但我認爲問題是數據加載後高度設置不正確，因此它只顯示頂部。

我做了什麼，爲我工作。

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

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

來源

2010-12-01 18:47:17 user527007

這實際上或多或少是什麼我最後也做了，將它綁定到我的選項卡的選項卡顯示事件，工作得很好，即使它感覺像一個黑客:) – 2010-12-01 19:44:12

-2

你試過顯示：隱藏而不是顯示：無？

不知道它是否會工作，但值得嘗試。

來源

2010-11-03 05:36:34 Steve

我想你的意思'可見性：隱藏;' - 這個工作對我來說有絕對的位置。事實上，沒有這個'fullCalendar（'render'）'根本就沒有工作。（'position''relative'，visibility：'visible'}）。fullCalendar（'render'）;' – 2014-07-31 09:46:08

我不得不點擊「今天」按鈕來使日曆實際出現在jQueryUI標籤中。通過在初始化日曆之後初始化標籤，我能夠完全解決問題。然而，我是在文檔頭部做這件事，並在body標籤關閉之前調用所有其他js。希望有所幫助。

來源

2010-11-03 21:42:01 Masondesu

當DIV是隱藏的，fullCalendar不知道什麼大小應該表現自己，所以你只需要調用render功能你知道以後該DIV可見。

它附加到Show事件或什麼：

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

來源

2011-07-20 00:37:39 ggez44

是的，這是我最終做的，看到我對第一個答案的評論:) – 2011-07-20 05:33:29

更喜歡這個解決方案，而不是不得不重新調用整個init腳本（我總是不喜歡多次運行腳本，如果有某種重新加載，刷新或在這種情況下可用渲染選項） – JakeJ 2015-01-16 15:31:14

您也可以撥打.resize（）的日曆的任何父/祖先元素 - 當你知道日曆可見;）

來源

2011-12-09 13:19:51

當你點擊標籤調用是這樣的：

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

來源

2012-02-01 21:05:24

必須使用JavaScript來設置顯示無

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>

來源

2012-11-13 08:00:27 gizmo16

我知道這個問題是一個古老，但它第一次來到了，而我正在尋找解決方案爲同樣的問題。由於某些原因，the proposed solution with render在某些特定情況下無效（如果非活動標籤加載了日曆條目），所以我必須refetchEvents。

的代碼如下：

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

來源

2018-01-10 05:09:20 AntonK

如何正確加載隱藏div中的jQuery fullcalendar插件

回答

相關問題