カレンダーを実装しています。viewに表示させるところまでは出来ました。

Question

やりたいこと

ぐるなび風の予約システムを作りたい。

現状

試行錯誤しながらなんとかhtml.erbでカレンダーを作りました。
デザインとか色々ツッコミどころ満載ですがそこはやさしい気持ちを持って見ていただけると幸いです。
![]

<div class="main users-index">
  <h1>Home#top</h1>
  <p>Find me in app/views/home/top.html.erb</p>
<div class="container">


  <div class="box2">
    <p class="sample">日付&nbsp;<input type="text" name="example1"></p>

    <% today = Date.today%>
    <table>
      <caption><%= today.strftime('%Y年%m月')%></caption>
      <tr>
      <th>月</th>
      <th>火</th>
      <th>水</th>
      <th>木</th>
      <th>金</th>
      <th>土</th>
      <th>日</th>
    </tr>
    <tr>
      <% month = today.strftime('%m')%>
      <% d = today.at_beginning_of_month.at_beginning_of_week%>
      <% 1.upto(5).each do|i|%>
    <tr>
      <% (d..d.end_of_week).each do|c|%>
      <th>
        <%= (c.strftime('%m') == month)? c.strftime('%d'): "  "%>
        <p>○</p>
      </th>
      <% end %>
    </tr>
    <% d = d + 1.week %>
    <% end %>
    </table>
    <p class="sample">コース&nbsp;<input type="text" name="example1"></p>
      <form class="sample" method="post">
        <p>時間
        <select name="horoscope">
        <option>10:00</option>
        <option>11:00</option>
        <option>12:00</option>
        <option>13:00</option>
        </select></p>
　　　　</form>
    <p class="sample"><input type="button" value="予約する"</p>
</div>
</div>
</div>

困っていること

困っていることはたくさんあり過ぎてお聞きしたいことはたくさんあるのですが、今一番知りたいこととしては

• カレンダーの月の切り替えの仕方
• htmlで表示させているだけなのでぐるなびのカレンダーのように日にちの箇所をクリックをした際に日付の部分にクリックした月日を表示させたい

railsを勉強し始めたばかりで本当に何をどうしたらいいかが分からない状態です。なので、出来ればサンプルコードを交えて少し詳しくご教示していただけると勉強になります。

Answer 1

詳しい回答じゃないのですが、javascriptを勉強すれば困っていることを解消できると思いますよ。
そもそも日付選択するやつを自分で作らなくてもDatePickerというものもあるので、検索してみるといいかもしれません。
時間の都合上詳しいサンプルコードを交えてはできないのですが、参考になれば嬉しいです。

Comments

[退会済みユーザー]

ライブラリーやbootstrapでdatepicekrがあるのは知っているのですが（実際にも試しました）、いろんな機能に対応するためかコード量が多くどこをカスタマイズすればいいかが分からないため、自分で理解しながら実装していくのが時間効率がいいかと思い自作で考えています。
また、ライブラリーでもjavascriptが多く使われてカレンダーが作られているのでjavascriptを使うのがセオリーなのかなと思うのでjavascriptを使っていくつもりなのですが、なんせイメージに対する要件定義ができずにいます。
なので、食べログのようなカレンダーの作り方の一連の流れだけご教示願えないでしょうか？

[Tsukuni]

jsを使うと、クリックした部分の文字列を取得したり、どこかの部分の文字列を他のものに変えたりってことができるようになります。

ある日付をクリックして、その日付を上にあるinputに表示させたい時は、クリックした場所の値(1とか２)を取得して、日付のinputにそれを挿入したらいいです。

こんな感じですね
https://cpoint-lab.co.jp/article/201803/%E3%80%90javascript%E3%80%91%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E7%AD%89%E3%81%A7%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9F%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF/