【Angular】Full calendarで横スクロールを実装

こんにちは

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;
  }
}

こんな感じに設定すれば横スクロールが出来るようになるかと思います。
参考にしてみてください。