こんにちは
Full Calendarにはいくつかの表示モードがあります。
こちらから確認できます。
FullCalendar
この中にResourceTimeGridという表示形式があり、 列に対してフルカレンダー側が自動で横幅を均等にしてくれます。
これがとても便利なのですが、「各列に対して横幅を指定して列幅の合計値がフルカレンダーの幅を超えたら横スクロールを出す」みたいな実装をしたい時にはCSSを上書きする必要があります。
フルカレンダーのversionは4を使用してます。
.fc-resourceTimeGridDay-view { .fc-view-container & { width: auto; &.fc-view { overflow-x: scroll; } } .fc-view table { // 5列 x 300pxと仮定して width: 1500px; } .fc-head .fc-resource-cell { width: 300px; } .fc-bg .fc-day { width: 300px; } .fc-body .fc-content-skeleton td { width: 300px; } .fc-body .fc-content-skeleton .fc-content-col { width: 300px; } }
こんな感じに設定すれば横スクロールが出来るようになるかと思います。
参考にしてみてください。