前提・実現したいこと
現在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にベタ書きしているのも間違っているかもしれません。
コードやそもそもの考え方におかしなところがあればご教授いただけると幸いです。
お手数ですがよろしくお願いいたします。