6

FullCalendar の現在のビューポート サイズに基づいて、ユーザーのビューを変更する簡単な方法はありますか?

私がやりたいのは、デスクトップでは月表示、iPhone またはモバイル デバイスを使用している場合は日表示です。現時点では、月表示ではすべてのイベントがモバイルで押しつぶされています。

現在のコード:

$(document).ready(function() {
    $("#primary #calendar").fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        timeFormat: 'h(:mm)tt',         
        eventSources: [
            {
                url: 'http://www.google.com/mycal1',
                color: 'blue',
                textColor: 'white'
            },
            {
                url: 'http://www.google.com/mycal2',
                color: 'white',
                textColor: 'black'
            }
        ]
    })
});
4

1 に答える 1

2

これはまさにあなたが探しているものではないかもしれませんが、正しい方向への出発点になるかもしれません。

私たちのウェブサイトはレスポンシブで、ほとんどすべてのページに「viewScreenSize」機能が含まれています...

var thisScreenWidth = 0, thisScreenHeight = 0;
function viewScreenSize() {
    if (typeof (window.innerWidth) === 'number') {
        //Non-IE
        thisScreenWidth = window.innerWidth;
        thisScreenHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        thisScreenWidth = document.documentElement.clientWidth;
        thisScreenHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        thisScreenWidth = document.body.clientWidth;
        thisScreenHeight = document.body.clientHeight;
        screenWidth = thisScreenWidth;
    }
    // screenSize = div in page footer  
    $("#screenSize").html(thisScreenWidth + "x" + thisScreenHeight);
}

fullCalendar が '$(document).ready(function () {}' に読み込まれ、画面幅が 601 よりもリードされている場合 ...

if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');

画面をリサイズすると…

$(window).bind('resize', function () {
    if (thisScreenWidth < 601) $('#calendar').fullCalendar('changeView', 'basicDay');
    else $('#calendar').fullCalendar('changeView', 'month');
});

実際の例... http://theelmatclark.com/AboutUs/Calendar - ブラウザ ウィンドウのサイズを変更するだけ - サイズを変更すると、[ホーム] ボタンの横のフッターに現在の幅/高さが表示されます。

もっと良い方法があるかもしれませんが、私はまだ見つけていません。幸運を。

質問...ヘッダーを複数の行に分割する方法を知っている人はいますか?

于 2013-08-18T11:06:12.590 に答える