前提
現在、シンプルカレンダーを用いて予約機能の実装しています。
エラーは出ていないものの、カレンダーの曜日と月の表示が乱れていたため修正したいです。
お助けください。
実現したいこと
- 曜日表示を直す→Sun, Mon, Tue...
- 月表示を直す→May2022
発生している問題・エラーメッセージ
該当のソースコード
index.html.erb
<%= render 'shared/header' %> <div class="reserve"> <h1 class="reserve-title">RESERVE</h1> <div class="reserve-row"> <div class="col-12 text-center"> <h1>予約画面</h1> <p>3ヶ月先まで予約することができます</p> </div> <div class="col-12 mt-3"> <%= week_calendar events: @reservations do |date, reservations| %> <%= date.day %> <% end %> </div> </div> </div> <%= render 'shared/footer' %>
application.html.erb
<!DOCTYPE html> <html> <head> <title>SalonApp</title> <meta name="discription" content="おしゃれなサロンのサイトです"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%# <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%# <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet"> <%# <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> %> </head> <body> <%= yield %> </body> </html>
_week_calendar.html.erb
<div class="simple-calendar"> <div class="calendar-heading"> <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view %> <% if calendar.number_of_weeks == 1 %> <span class="calendar-title"><%= t('date.month_names')[start_date.month] %> <%= start_date.year %></span> <% else %> <span class="calendar-title"><%= t('date.month_names')[start_date.month] %> <%= start_date.year %></span> <% end %> <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view %> <% reservations = Reservation.reservations_after_three_month %> </div> <table class="table table-striped"> <thead> <tr> <th>TIME</th> <% date_range.slice(0, 7).each do |day| %> <th width="12%"><%= t('date.abbr_day_names')[day.wday] %></th> <% end %> </tr> </thead> <tbody> <% date_range.each_slice(7) do |week| %> <tr> <td></td> <% week.each do |day| %> <%= content_tag :td, class: calendar.td_classes_for(day) do %> <% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %> <% capture_haml(day, sorted_events.fetch(day, []), &passed_block) %> <% else %> <% passed_block.call day, sorted_events.fetch(day, []) %> <% end %> <% end %> <% end %> </tr> <% times.each do |time| %> <tr> <td><%= time %></td> <% week.each do |day| %> <td> <% if check_reservation(reservations, day, time) %> <%= '✖️' %> <% else %> <%= link_to new_reservation_path(day: day, time: time) do %> <%= '○' %> <% end %> <% end %> </td> <% end %> </tr> <% end %> <% end %> </tbody> </table> </div>
reservations.css
/* 予約 */ .reserve { width: 70%; margin: 0 auto 40px; } .reserve-title { font-size: 35px; margin-bottom: 32px; font-family: 'Oswald', sans-serif; color: lightslategray; } .reserve-row { display: flex; flex-direction: column; align-items: center; padding: 32px; border: 1px solid lightslategray; } .text-center { text-align: center; } .text-center h1 { font-size: 30px; margin-bottom: 8px; } .text-center p { padding-bottom: 24px; } /* カレンダー */ .simple-calendar { width: 800px; font-family: 'Oswald', sans-serif; } .calendar-heading { margin: 16px auto 8px; width: 90%; } .calendar-heading a { text-decoration: none; } .table { text-align: center; margin: 0 auto 16px; width: 90%; } .table th, .table td { border-top: 1px solid lightslategray; border-bottom: 1px solid lightslategray; padding: 8px 0 8px; } .table tr:nth-child(odd) { background-color: #EFEFEF; } .table th { background-color: white; } .table td a { text-decoration: none; font-weight: bold; color: #3F78BF; }
補足情報（FW/ツールのバージョンなど）
Rails 6.0.4.7
まだ回答がついていません
会員登録して回答してみよう
