fullcalendar - 私は私のfullcalendarが動的にブラウザウィンドウのサイズに応じてサイズを変更することをそうする必要があるだろうか疑問に思って、私はfullcalendar（<a href="http://arshaw.com/fullcalendar/" rel="noreferrer">fullcalendar by adam shaw</a>）</p> <p>を使用しています

Question

のサイズを変更するウィンドウ上のカレンダーのサイズを変更しますか？私は彼の「レンダリング」機能を少し見てきましたが、これを理解することに問題がありました。

（つまり、ユーザーがウィンドウのサイズを変更したときに、私はそれが適切なアスペクト比に幅と高さだ再調整するfullcalendarをしたいと思います）

Answer 1

それはすべて文書化されています。

はこの線に沿って何かをしようと、見てみましょう：

//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にカレンダーを配置してそのように操作できます。幅については

Answer 2

それはあなたが私はあなたを考えて欲しかったものですので、私は、「応答カレンダー」をGoogleで検索それを語る方法を知らなかった。私は、私があなたに提供したリンクが、あなたをあなたの道に導くべきだと考えています。私はあなたがあなたのタグのためにjavascript/jqueryを使ってこれをしたいと仮定しています。リンクが便利な場合は、何を検索するのかを知っているので、これもうまくいきます。Good Luck！

応答カレンダーデモ：
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html（ある程度の後、アジェンダビューへの変更。）

詳細：
http://dbushell.com/2012/01/04/responsive-calendar-demo/

Answer 3

、我々は、応答性のデザインと一緒に調整するために、カレンダーが柔軟に、そして、それは、より大きなディスプレイ上で非常によく働いた：（高さまたはデフォルトビューを変更する）他のカスタマイズについては

#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'; 
}