0

前提・実現したいこと

現在GitHubのcontributionsのような部分を自作しております。

↓GitHubのcontributions部分
画像の説明をここに入力

↓自作
画像の説明をここに入力

発生している問題

Railsで定義した変数をJSのclickイベントで変更したいのですがやり方がわからず困っております。

具体的には上の画像で、
前の年を押したら2018年に、次の年を押したら2020年に、
その下の1〜12のボタンを押したらその月になるようにしたいです。
(まだCSSを組んでおらず見にくく申し訳ありません)

JSだけでならできるのですが、GitHubのようにコミット数で(自分の場合は写真のカレンダー上にあるツイートから持ってきた学習時間数によって)その日の色を変えたいため、
RailsとJSのバックとフロントの変数の繋げ方がわからず行き詰まっております。

該当のソースコード

<% today = Time.current %>
<% thisYear = today.strftime("%Y") %>
<% thisMonth = today.strftime("%m") %>
<% thisDay = today.strftime("%d") %>
<% weeks = ['日', '月', '火', '水', '木', '金', '土'] %>

<%# 今月からmヶ月前 %>
<% m = 0 %>
<%# // 月の最初の日を取得 %>
<% startDate = today.ago(m.month).beginning_of_month %> 
<%# // 月の最後の日を取得 %>
<% endDate = today.ago(m.month).end_of_month %> 
<%# // 月の末日 %>
<% endDayCount = endDate.strftime("%d")%> 
<%# // 月の最初の日の曜日を取得 %>
<% startDay = startDate.wday %> 
<%# // 日にちのカウント %>
<% dayCount = 0 %> 

<table>
  <caption class="title">学習カレンダー</caption>
  <button id="prev" type="button">前の年</button>
  <caption class="year_month"><%= today.ago(m.month).strftime("%Y年%m月") %></caption>
  <button id="next" type="button">次の年</button><br>
  <% for i in 1..12 do%>
  <button><%= i %></button>
  <% end %>
  <tr>
    <% for j in 0..6 do %>
    <th><%= weeks[j] %></th>
    <% end %>
  </tr>

  <% for w in 0..5 do %>
    <tr>
    <% for d in 0..6 do %>
      <% if (w == 0 && d < startDay.to_f) %>
        <%# // 1行目で1日の曜日の前 %>
        <td>0</td>
      <% elsif (dayCount > endDayCount.to_f-1) %>
        <%# // 末尾の日数を超えた %>
        <td>0</td>
      <% else %>
        <td>
          <p class="day"><%= startDate.since(dayCount.days).strftime("%-d日") %></p>
          <p class="hours">
            <% sum = 0 %>
            <% @posts.each do |post| %>
              <% if post.created_at.strftime("%Y%m%d") == startDate.since(dayCount.days).strftime("%Y%m%d") %>
              <% sum += post.hours.to_f %>
              <% end %>
            <% end %>
            <%= sum.to_f %>
          </p><span>時間</span>
        </td>
        <% dayCount += 1 %>
      <% end %>
    <% end %>
    </tr>
  <% end %>
</table>

試したこと

gemのgonや <%== JSON.dump() %> などを使ってみたのですが上手くいきませんでした。
gonを使ったRailsとJavascriptの連携について - Qiita

プログラミング自体Progateなどを使って独学しているためコードの書き方ももおかしいかもしれません。
html.erbにベタ書きしているのも間違っているかもしれません。
コードやそもそもの考え方におかしなところがあればご教授いただけると幸いです。
お手数ですがよろしくお願いいたします。

1 件の回答 1

0

自分がぱっと思いついた方法で一つ参考までに。

日付のデータをパラメータなんかで送るのが一番ありがち、かつ楽かなと思いました。

例えば
http://localhost/hoge?year=2020&month=03
↑のようにURLにパラメータを付与してあげれば

js:location.search // "?year=2020&month=03"
rails:params[:year], params[:month]

で取得できるのであとはそのデータを@postsに反映してあげればできるかと思います。
ちょっとわかりにくいかもなのでわからなかったら気軽に質問してください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。