曜日の一部に色を付ける方法について

Question

＜やりたいこと＞
カレンダーの土曜日は青、日曜日は赤、それ以外の曜日はそのまま(黒)表示させたいです。

＜困っていること＞
埋め込みrubyの中でどの様にコードを書いていいかわからない。

＜ビュー＞

<% @dates.each do |day| %>
　<% 
    css_class = 
    case day.worked_on.wday
    when '土' then
      'text-primary'
    when '日' then
      'text-danger'
    end
  %>
  <tr>
    <td><%= day.worked_on.to_s(:date) %></td>
    <td class="<%= css_class %>"><%= %w{日 月 火 水 木 金 土}[day.worked_on.wday] %></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
<% end %>

<gemfile> ```ここに言語を入力 source 'https://rubygems.org'

gem 'ransack'
gem 'rails-i18n'
gem 'rails', '5.1.6'
gem 'bcrypt', '3.1.12'
gem 'faker', '1.7.3'
gem 'will_paginate', '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'bootstrap-sass', '3.3.7'
gem 'puma', '3.9.1'
gem 'sass-rails', '5.0.6'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'

group :development, :test do
gem 'sqlite3', '1.3.13'
gem 'byebug', '9.0.6', platform: :mri
end

group :development do
gem 'web-console', '3.5.1'
gem 'listen', '3.1.5'
gem 'spring', '2.0.2'
gem 'spring-watcher-listen', '2.0.1'
end

group :test do
gem 'rails-controller-testing', '1.0.2'
gem 'minitest', '5.10.3'
gem 'minitest-reporters', '1.1.14'
gem 'guard', '2.13.0'
gem 'guard-minitest', '2.4.4'
end

group :production do
gem 'pg', '0.20.0'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

＜現状＞
![イメージ説明](f3aa5375edeb3c6f0bb63cb74b51b250.png)

ヒントや記事などなんでもいいのでアドバイスいただけると幸いです。
よろしくお願いします。

Answer 1

<% @dates.each do |day| %>
  <% 
    css_class = 
    case %w{日 月 火 水 木 金 土}[day.worked_on.wday]
    when '土'
      'text-primary'
    when '日'
      'text-danger'
    end
  %>
  <tr>
    <td><%= day.worked_on.to_s(:date) %></td>
    <td class="<%= css_class %>"><%= %w{日 月 火 水 木 金 土}[day.worked_on.wday] %></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
<% end %>

bootstrapベースでしたらこんな感じでしょうか
tdにclassを当てることによってテキストの色を変更するイメージです。
bootstrapを使っていない場合、cssで対応するclassを定義してあげ、case文の中の'text-primary'などを定義したclassに変更してあげればいけると思います。

Comments

[ikt_erk122]

回答ありがとうございます。
アドバイス通りにコードを書いたのですが色が変わりませんでした。追記でgemfileやビューを追加しますので確認していただけないでしょうか

[haneru]

case文の条件を修正しました。
こちらで試してみてください。

[ikt_erk122]

無事色を変えることができました。
回答していただきありがとうございました。