質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

解決済

カレンダーの曜日表示を直したい

prodaigo
prodaigo

総合スコア31

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

1回答

0評価

0クリップ

203閲覧

投稿2022/05/28 11:40

前提

現在、シンプルカレンダーを用いて予約機能の実装しています。
エラーは出ていないものの、カレンダーの曜日と月の表示が乱れていたため修正したいです。
お助けください。

実現したいこと

  • 曜日表示を直す→Sun, Mon, Tue...
  • 月表示を直す→May2022

発生している問題・エラーメッセージ

Image from Gyazo

該当のソースコード

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。