技術

【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

【Rails】idのauto increment設定を削除する

こんにちは railsを触っていてidからauto incrementの設定を削 …

no image

[Angular]リアクティブフォームのHTML側の記法

Angularのリアクティブフォームではtsファイル側でネストした構成を組むこと …

no image

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

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

[AWS S3] This XML file does not appear to have any style information associated with it. The document tree is shown below.

はじめまして。田中です。 AWSを触りはじめてから1ヶ月ちょっと。七転び八起きな …

Slack Tasker系アプリで絵文字ステータスを自動設定(android 「Automate」)

Slackの絵文字ステータス、皆さん使っているでしょうか? 私は自分の居る場所に …