FullcalendarでslotDurationを15分にした時のサイズの調整

技術備忘録

FullcalendarのtimeGridWeek, timeGridDayのslotDurationを15分に設定できるのですが、その場合縦幅が通常よりも長くなってしまうという問題があったのでCSSで対応しました

  • @fullcalendar/react@5.5.0
<FullCalendar
...
    // '12:00'のように表示する
    slotLabelFormat={{
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: false,
        meridiem: 'short'
    }}
    // 15分ごとのslot
    slotDuration={'00:15'}
    // 1時間ごとにラベルを表示
    slotLabelInterval={'01:00'}
/>
/* slot labelのサイズ */
td.fc-timegrid-slot.fc-timegrid-slot-label{
  font-size: 0.35em;
}
/* slotのサイズ */
td.fc-timegrid-slot.fc-timegrid-slot-lane.fc-timegrid-slot-minor{
  font-size: 0.35em;
}
td.fc-timegrid-slot.fc-timegrid-slot-lane{
  font-size: 0.35em;
}

コメント

タイトルとURLをコピーしました