Ruby 2 Rails 4 を使用しています。twitter-bootstrap-rails gem を使用して、ブラウザーのサイズ変更時にナビゲーション バーを折りたたむようにしています。
Adam Shaw の FullCalendar で同様の効果が欲しいです。現在はウィンドウに合わせてサイズ変更されますが、ブラウザーが 480 ピクセル以下の場合は 1 日 (basicDay ビュー)、ビューポートが 767 未満の場合は 1 週間 (basicWeek ビュー)、月ビューは完全に表示する必要があります。 -サイズのウィンドウ。
ブラウザーのサイズが異なる場合は、3 つの異なるカレンダーを初期化したほうがよいでしょうか?
すなわち:
<script> $(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/myfeed',
if $(window).width() < 514){
defaultView: 'basicDay'
}
header: {
left: 'title',
center: '',
right: 'today basicDay basicWeek month prev,next'
},
});
});
</script>
それとも、もっと簡単でシンプルな解決策がありますか?
また、私はこれに本当に慣れていないので、上記のサンプルコードが書かれたとおりに機能しないことはわかっていますが、少なくとも正しい方向に進んでいますか?
これがどこかに書かれている場合は申し訳ありませんが、見つけることができませんでしたが、誰かが私を正しい方向に向けてくれたらうれしいです.
アップデート：
最初のコメントに応えて、機能させるために fullcalendar.js に入り、メイン レンダリングの動作を変更しました (240 行目)。
/* Main Rendering
-----------------------------------------------------------------------------*/
setYMD(date, options.year, options.month, options.date);
function render(inc) {
if (!content) {
initialRender();
}
else if (elementVisible()) {
// mainly for the public API
calcSize();
_renderView(inc);
}
}
function initialRender() {
tm = options.theme ? 'ui' : 'fc';
element.addClass('fc');
if (options.isRTL) {
element.addClass('fc-rtl');
}
else {
element.addClass('fc-ltr');
}
if (options.theme) {
element.addClass('ui-widget');
}
content = $("<div class='fc-content' style='position:relative'/>")
.prependTo(element);
header = new Header(t, options);
headerElement = header.render();
if (headerElement) {
element.prepend(headerElement);
}
changeView(options.defaultView);
if (options.handleWindowResize) {
$(window).resize(windowResize);
}
// needed for IE in a 0x0 iframe, b/c when it is resized, never triggers a windowResize
if (!bodyVisible()) {
lateRender();
}
// added this to specify how initial rendering should act on mobile devices.
if ( $(window).width() < 480){
changeView('agendaDay')
};
}
ご覧のとおり、「if ( $(window).width...」を追加しましたが、問題の半分しか解決しないため、これだけでは優れた解決策ではありません。最初のレンダリングは、モバイルとブラウザー ウィンドウのサイズ変更に応答しないが、カレンダーはブラウザー ウィンドウのサイズ変更に応答しない 上記のソリューションに MarCrazyness の回答を組み込むことで、ブラウザーでのサイズ変更の問題が解決されました。
私のビューは次のようになります。
Schedule.html.erb $(document).ready(function() {
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/...',
weekMode: 'liquid',
defaultView: 'agendaWeek',
allDaySlot: false,
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'today prev,next'
},
windowResize: function(view) {
if ($(window).width() < 514){
$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
} else {
$('#calendar').fullCalendar( 'changeView', 'agendaWeek' );
}
}
});
});
</script>
注: ヘッダーの設定を変更しましたが、このソリューションが機能するために必要なわけではありません。
これら 2 つの戦術の 1 つまたは組み合わせがニーズを満たしていることを願っています。より簡単な解決策がある場合、またはいずれかの回答を進める場合は、飛び込んでください。