web-dev-qa-db-ja.com

行のフルカレンダー固定高さ

フルカレンダーで行の固定高さを設定するにはどうすればよいですか？イベントが多すぎる場合は、垂直スクロールバーが必要です。

$('#calendar').fullCalendar('option', 'contentHeight', 50);
fullcalendar
9
gormit

私にとってはこれだけがうまくいった

.fc-agendaWeek-view tr {
    height: 40px;
}

.fc-agendaDay-view tr {
    height: 40px;
}
14
Jaxx0rr

各タイムスロット行の高さを変更する場合は、cssクラスをオーバーライドできます。

.fc-agenda-slots td div {
     height: 40px !important;
}

他にご不明な点がございましたら、お気軽にお問い合わせください。

ContentHeightは、カレンダーの高さのみを計算するために使用されます。

11
Pitchai P

私のスクリプトでは、行を小さくしたかったのですが、同じコードを使用して行を大きくすることができます。行を小さくするときは、最初の列の4つのセルをそれぞれマージして（15分の粒度で作業する場合）、時間の表示をセルに収める必要がありました。次のコードを使用して、セルを結合します。

$(function(){
    // Merge first column, each 4 rows to display time in larger format
    $('table.fc-agenda-slots tbody tr:not(.fc-minor)').each(function(){
        $(this).find("th:first-child").css("font-size", "12px").attr('rowSpan',4); //
        $(this).nextUntil("tr:not(.fc-minor)","tr.fc-minor").find("th:first-child").remove();
    });
})

次に、CSSを使用して正しい行の高さを適用します。ブートストラップとの互換性のために必要な行の高さのスタイルを追加したことに注意してください。また、カレンダーの外にドラッグするときに、デフォルトの選択動作が適用されないことを確認しました。

        body {
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;              
        }

        .fc-agenda-slots td div {
            height: 6px;
            line-height: 6px;
        }
        .fc-agenda-axis {
            font-size:1px;
            line-height: 1px;
        }
2
Cor