note

ブラウザのサイズに合わせてFullcalendarの高さを変更する

Fullcalendarのお仲間で、Schedulerというプラグインがあるのですが、タイムラインの高さ調整に少々手間取ったので、そのときのメモ。

オプションは、Fullcalendarとほぼ一緒かと思います。

windowResize

windowResizeというオプションを使用します。

$('#calendar').fullCalendar({
  height: window.innerHeight - 100, // ①
  windowResize: function () { // ②
    $('#calendar').fullCalendar('option', 'height', window.innerHeight - 100);
  }
});
  1. 高さの初期設定
    window.innerHeightでウィンドの高さを取得、ちょっと微調整して heightオプションに指定する。
  2. windowResize
    ウィンドのサイズを変更すると、windowResizeが発動します。ここにカレンダーのオプションを更新する処理を実装。
    $('#calendar').fullCalendar('option', 'height', window.innerHeight - 100);

うーん、簡単だったね。

数時間、苦戦したんだけどね。。。

-note

© 2021 Mikke's blog