技術

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

関連記事

どうも中田です。 Rails5.2から config/credentials.y …

[Xcode]Provisioning Profileの中身を確認する方法

こんにちは。たなかです。 以前『[Xcode]Provisioning Prof …

no image

Macで簡単にIE環境を構築する手順

こんにちは、コーテッグの小山です。 今までちょろっとIE対応をやることはあったの …

[ionic] Error code 70 / requires a provisioning profile with the Push Notifications feature.

どうも中田です ionic使っててbuildで引っかかりましたー ionicでp …

[ Ionic ] アプリのビューをiPhoneXのセーフエリアに対応させる

こんにちは。たなかです。 Ionicで開発しているとき、ハマりがちなポイントの一 …