【Rails】調整さんのようなカレンダーを表示する
調整さんのようなカレンダーを作ると表示する内容が固定されていればtableタグなどで出来るが、 DBに保存された内容だとどうhtmlを組めば分からない。
調整さんってご存知ですか?
ちょっとした打合せとかする時に皆の予定を確認するのにめちゃくちゃ便利な調整さん。
これと似たような画面をrailsでどうやって作るのかな〜と思い試してみました。
こちらが完成イメージです。それではカレンダーを表示してみましょう!
この記事を読めば以下2つが分かるようになります。
調整さんを実現するモデル
キャラクターモデル
# character.rb class Character < ApplicationRecord extend Enumerize has_many :deathblows has_many :character_magics, dependent: :destroy has_many :magics, through: :character_magics accepts_nested_attributes_for :deathblows, allow_destroy: true enumerize :name, in: [:terra, :celes, :locke, :sabin] enumerize :sex, in: [:male, :female] validates :name, presence: true validates :sex, presence: true def build_default_deathblows (self.deathblows.count..7).each do self.deathblows.build end end end
魔法モデル
# magic.rb class Magic < ApplicationRecord has_many :character_magics, dependent: :destroy has_many :characters, through: :character_magics validates :name, presence: true end
キャラクター魔法モデル
# character_magic.rb class CharacterMagic < ApplicationRecord belongs_to :character belongs_to :magic end
調整さんのようなカレンダー表示
ルーティングや、コントラーラーは今回割愛しますが、画面の作り方になります!
view
イメージとしてはキャラクターごとに1行にまとめ、それを横に並べていく感じです。
# index.haml %h1 調整さんのようなカレンダー .tyousei__calendars %ul.tyousei__calendars-body %li.tyousei__calendars-item %p - - @magics.each do |magic| %p = magic.name - @characters.each do |character| %li.tyousei__calendars-item %p = character.name_text - @magics.each do |magic| %p - if character.character_magics.find_by(magic_id: magic.id).present? ●
css
横並びはdisplay: flex
を使えばもう簡単にできますね。
後は、文字に応じて高さや幅が変わってしまうので一つ一つのセルに指定してやればokです!
.tyousei__calendars-body display: flex .tyousei__calendars list-style: none .tyousei__calendars-item list-style: none width: 100px text-align: center &:first-child font-weight: 700 p height: 30px &:first-child font-weight: 700
そして、完成したカレンダーがこちら!