技術

【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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

セレクトボックスにfont-awesomeのアイコンを使うときは注意が必要。

セレクトボックスの中にfont-awesomeのアイコンを表示したい。 そんなと …

Google PolyをFusion360でお試し

Googleさんが公開した無料の3Dデータライブラリ Poly AR・VRアプリ …

no image

【ionic】view-titleが更新できない!!

どうも中田です。 ionicのview-titleを動的に変えるってパターンはし …

Chrome開発者ツールの背景を黒にする

普段コーディングしている時は、背景黒の方が目に優しい気がするのでエディターの背景 …

no image

【Angular】component.htmlをprettierで整形する

こんにちは 今回はcomponent.htmlをprettierで整形する方法を …