技術

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

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

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …

no image

【gem/bundle】あんたたち一体どういう関係なのよ!!

どうも中田です。 今回はgemとbundleの話。 前置き よくあるgemの説明 …

no image

こんにちは。コーテッグの小山です。 以前リアクティブフォームのHTML側の記述と …

no image

auto_incrementの値を確認して変更

こんにちは、コーテッグのこやまです。 railsとmysqlを使っていて、自動で …

no image

hamlをerbに変換する

こんばんは railsの色々な記事を見ていると、hamlで書かれているものも結構 …