適合容器和隱藏滾動的全日曆

我無法弄清楚如何縮放fullcalendar以適應它的父容器。我想爲用戶在單個頁面上顯示周視圖而無需滾動（因此他們可以快速查看一週的內容）。適合容器和隱藏滾動的全日曆

我很好，如果我需要使文本小，插槽高度更小等，但我不知道如何根據瀏覽器窗口的大小動態地做到這一點。
（在我的日曆我使用slotMinutes:10 and times from 8am to 10pm）
的jsfiddle與fullcalendar：http://jsfiddle.net/bQXYp/27/

來源

2013-05-14 user194076

有要考慮的幾個因素。

如果您想堅持將slotMinutes設置爲10，那麼將時間範圍從上午8點到晚上10點固定到頁面上將非常困難，而無需手動駭入字體大小而幾乎難以辨認。

如果您將slotMinutes屬性增加到30或60甚至更好，那麼您很有可能在不需要滾動的情況下顯示每週視圖。

除此之外，還有兩個屬性可以用來影響日曆的尺寸。第一個是height。但是，這會設置一個不會動態縮放的像素值。第二個是aspectRatio，它允許定義寬高比。換句話說，aspectRatio值爲2意味着它將嘗試拉伸高度爲寬度的兩倍（如果需要的話）。

I have set up an example here顯示您具有合理的slotMinutes值的效果。在我看來，這是能夠實現你所需要的最重要的事情。

來源

2013-05-14 02:35:39 karancan

我認爲你是對的。我最終得到的結果是：添加兩個按鈕：zoomIn和ZoomOut。每次用戶點擊時，我都會將slotMinutes更改爲不同的值。謝謝 – user194076 2013-05-18 19:09:00

嘗試contentHeight屬性： http://arshaw.com/fullcalendar/docs/display/contentHeight/

成你想要的minTime和MAXTIME這消除在的jsfiddle例如在FullCalendar的內容區域的垂直滾動條：

contentHeight: 1850,   
minTime: '8', 
maxTime: '22',

（不過可以肯定的不要設置aspectratio，因爲這似乎超過了contentHeight）

雖然作爲Karancan提到適合一個屏幕而不滾動，你需要減少字體大小爲一個幾乎不可讀的大小。

（如果你使用IE8，那麼你可能有高度..等問題）

來源

2013-05-14 06:44:03

嗨，我使用兩個視圖（月和agendaDay），當我切換到天視圖我改變或contentHeight像所以：

viewDisplay: function(view) { 
     //alert(view.name) 
      if(view.name == 'agendaDay') 
      { 
       $('#calendar').fullCalendar('option', 'contentHeight', 700);       
      }else{ 
       $('#calendar').fullCalendar('option', 'contentHeight', 200); 
    } 
}

也許它可以給你想要做一些方向;）

來源

2013-05-16 20:27:37

我只是解決了我的問題，下面的代碼

.fc-day-grid-container.fc-scroller { 
    height: auto!important; 
    overflow-y: auto; 
}

來源

2016-11-28 12:01:01

這也適用於我。我打開fullcalendar.css並滾動到fc-scroller。添加了高度並按照建議更改了overflow-y選項。而日曆月視圖起作用100％

來源

2016-12-05 13:17:18

我在列表視圖中使用它來顯示所有即將發生的事件。我加入到我自己的CSS-

.fc-scroller { 
height: auto!important; 
overflow-y: auto;

來源

2017-10-23 18:44:26 Drakum

適合容器和隱藏滾動的全日曆

回答

相關問題