fullcalendar - 調整窗口上日程調整

我使用fullcalendar（fullcalendar by adam shaw）fullcalendar - 調整窗口上日程調整

我想知道什麼，我需要做的，這樣我fullcalendar大小取決於瀏覽器窗口的大小是動態變化的？我已經研究了他的「渲染」功能，但一直無法解決這個問題。

（即，當用戶改變他們的窗口，我想fullcalendar重新調整它的寬度和高度，以一個合適的高寬比）

2012-04-02 captainrad

這一切都記錄在案。

讓我們來看看，嘗試一些沿着這條線：

//function to calculate window height 
function get_calendar_height() { 
     return $(window).height() - 30; 
} 

//attacht resize event to window and set fullcalendar height property 
$(document).ready(function() { 
    $(window).resize(function() { 
     $('#calendar').fullCalendar('option', 'height', get_calendar_height()); 
    }); 


    //set fullcalendar height property 
    $('#calendar').fullCalendar({ 
      //options 
      height: get_calendar_height 
    }); 
});

應用類似的寬度。或者你可以在div中放置日曆並以這種方式進行操作。

來源

2012-04-02 19:07:28

完美。感謝您的幫助！ p.s.我相信你錯過了一個額外的'}）;' ..但是，好吧！ – captainrad 2012-04-02 19:20:11

我用Google搜索「有求必應日曆」，因爲那是你想要什麼，我只是覺得你不知道該怎麼說。我相信我提供給你的鏈接應該讓你順利。我假設你想要使用javascript/jquery，因爲你的標籤。如果鏈接是有用的，那也很好，因爲現在你知道要搜索什麼，祝你好運！

響應日曆演示：
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html（更改議程觀點在一定程度之後。）

來源

2012-04-02 18:56:41 dkroy

抱歉，我應該更清楚。我正在與亞當肖斯fullcalendar jquery插件..我已更新我的帖子澄清！ – captainrad 2012-04-02 19:04:24

對於寬度，我們做出了日曆靈活，與響應式設計一起調整，和它的工作相當不錯的大屏幕顯示：

#calendar { 
    width: 100%; 
    margin: 0 auto; 
}

對於任何其他定製（改變高度或默認視圖），使用FullCalendar內置的windowResize事件。接受的答案的缺點是，該功能將在窗口被調整大小時運行，對於每個像素更改。相反，windowResize事件在調整大小完成後觸發。

現在，響應式日曆的問題在於，您仍然處於桌子的擺佈之中 - 這是一個在小屏幕上可怕的地方。

對於我們的項目，如果用戶在小於769px的屏幕上，我們選擇強制日視圖。在這個例子中你可以看到我們的方法。如果它不適合你，至少它會給你如何實施一個解決方案的方向。

var ww,view; 
$(function(){ 
    $('#calendar').fullCalendar({ 
     windowResize: function(view) { 
      ww = getWindowWidth(); 
      view = getView(); 
      var currentView = $('#calendar').fullCalendar('getView'); 
      if(view != currentView){ 
       $('#calendar').fullCalendar('changeView',view); 
      } 
      if(ww <= 768){ 
       $('.fc-header-right .fc-button').hide(); 
      }else{ 
       $('.fc-header-right .fc-button').show(); 
      } 
     } 
    }); 
});

這裏是上面提到的功能：

function getWindowWidth(){ 
    return $(window).width(); 
} 
function getView(){ 
    return (ww <= 768) ? 'basicDay' : 'month'; 
}

來源

2013-12-19 15:40:58 Matt

fullcalendar - 調整窗口上日程調整

回答

相關問題