fullcalendar行の固定高さ

Question

fullcalendarで行の固定高さを設定するにはどうすればよいですか？あまりにも多くのイベントがある場合、私は垂直スクロールバーを持っています。

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

Answer 1

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

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

他の場合は、お知らせください。

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

Answer 2

私のスクリプトでは、行を小さくしたいのですが、同じコードを使用して行を小さくすることができました。行を小さくするときは、最初の列の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; 
     } 

Answer 3

これだけは、あなたがこの作業を手に入れた

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

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