web-dev-qa-db-ja.com

fullcalendar-ウィンドウのサイズ変更時にカレンダーのサイズを変更する

私はfullcalendarを使用しています（ フルカレンダーby adam shaw ）

フルカレンダーがブラウザウィンドウのサイズに応じて動的にサイズを変更するには、何をする必要があるのでしょうか。私は彼の「レンダリング」機能を少し調べましたが、これを理解するのに苦労しています。

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

javascriptjqueryresizefullcalendar
13
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に配置して、そのように操作することもできます。

16
Matija Grcic

幅については、レスポンシブデザインに合わせて調整できるようにカレンダーを柔軟にしました。これは、より大きなディスプレイで非常にうまく機能しました。

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

その他のカスタマイズ（高さの変更またはデフォルトビューの変更）には、FullCalendarの組み込みのwindowResizeイベントを使用します。受け入れられた答えの欠点は、ウィンドウのサイズが変更されている間、ピクセルが変更されるたびに関数が実行されることです。逆に、windowResizeイベントは、サイズ変更が完了した後に発生します。

さて、レスポンシブカレンダーの問題は、あなたがまだテーブルに翻弄されていることです。小さなモバイル画面上にいるのはひどい場所です。

私たちのプロジェクトでは、ユーザーが769pxより小さい画面を表示している場合、日表示を強制することを選択します。この例で私たちの方法を見ることができます。それがうまくいかない場合は、少なくとも、うまくいくソリューションを実装する方法についての方向性が示されます。

$(function(){
    var $calendar = $('#calendar');
    $calendar.fullCalendar({
        windowResize: function() {
            var ww = $(window).width();
            var view = (ww <= 768) ? 'basicDay' : 'month';
            var currentView = $('#calendar').fullCalendar('getView');
            if(view != currentView){
                $calendar.fullCalendar('changeView',view);
            }
            if(ww <= 768){
                $calendar.find('.fc-header-right .fc-button').hide();
            }else{
                $calendar.find('.fc-header-right .fc-button').show();
            }
        }
    });
});
8
Matt

現在のビューは windowResize コールバックで渡されるため。

次の方法で応答性の高い動作を簡単に管理できます。

$('#calendar').fullCalendar({
    # ...
    windowResize: function (view) {
        var current_view = view['name'];
        var expected_view = $(window).width() > 576 ? 'agendaWeek' : 'agendaDay';
        if (current_view !== expected_view) {
            $('#calendar').fullCalendar('changeView', expected_view);
        }
    }
})

また、 handleWindowResize がtrue（デフォルト）に設定されていることを確認する必要があります。

0
Pierre de LESPINAY

私は「レスポンシブカレンダー」をグーグルで検索しました。それがあなたが望んでいたことだからです。あなたはそれを言葉で表現する方法を知らなかったと思います。私があなたに提供したリンクはあなたをあなたの道に連れて行くべきだと私は信じています。タグがあるため、javascript/jqueryを使用してこれを実行したいと考えています。リンクが便利な場合は、何を検索すればよいかがわかったので、それでも問題ありません。幸運を祈ります。

レスポンシブカレンダーのデモ：
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/

0
dkroy